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内 容 简 介 


本 书 通过 理论 讲解 和 案例 分 析 ， 详 细 介绍 了 初级 UI 设计 师 必 须 掌 握 的 基础 知识 ， 分 他 
了 作者 在 工作 中 的 实践 经 验 。 第 1 章 “ 移 动 端 组 件 的 认识 与 运用 ”主要 介绍 常用 组 件 的 特 
性 及 使 用 场景 ， 第 2 章 “ 能 力 效 率 提 升 ” 主 要 针对 日 常 工作 、 学 习 中 遇 到 的 问题 和 瓶颈 ， 
分 享 相关 的 解决 方案 ; 第 3 章 “设计 理论 与 实践 "主要 介绍 一 些 设 计 领 域内 实用 的 理论 知识 ， 
帮助 大 家 理解 优秀 设计 的 内 部 规律 ， 第 4 章 “ 工 作 困 惑 ” 针 对 UI 设计 师 在 不 同 工 作 阶段 遇 
到 的 困惑 ， 提 出 具体 可 操作 的 建议 。 

本 书 适合 UI 设计 领域 从 业者 、 爱 好 者 阅读 ， 也 适合 平面 设计 、 网 页 设计 等 相关 专业 的 
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推 存 序 


当 你 正式 路 上 用 户 体验 设计 这 条 路 的 时 候 ， 你 面前 融会 有 两 大 障碍 : 一 ， 面 对 产 
品 经 理 给 的 原型 图 ， 无 从 下 手 ， 彻 彻底 底 地 变 成 一 个 美化 工作 者 ， 导 致 工作 质量 和 效 
率 一 直 无 法 提升 ， 在 团队 面前 没有 任何 话语 权 ; 二 ， 面 对 各 种 各 样 的 理论 、 原 则 、 规 
学 ， 疑 惑 到 底 哪个 才 是 最 重要 的 ? 应 该 如 何 去 把 它们 跟 实 践 结 合 起 来 ” 如 何 去 一 个 个 
攻破 它们 ? 以 往 设计 知识 萎 之 ， 但 现在 的 设计 环境 已 经 变 了 ， 面 对 铺 天 苹 地 的 经 验 和 
教程 ， 哪 些 才 是 真正 能 够 对 新 手 设计 师 有 帮助 的 呢 ? 


海 蔓 社 是 由 一 群 在 Ul 中 国 非常 活路 且 非 常 优 秀 的 设计 师 组 成 的 团队 。 他 们 从 新 
手 设计 师 逐 渐 成 长 为 高 级 设计 师 ， 一步 一 个 脚印 ， 基 于 上 自己 的 工作 经 验 积 罕 和 人 外文 基 
础 ， 友 布 了 大 量 的 原创 和 目 诺 文章 ， 收 到 了 几 十 万 会 员 的 点 赞 和 收藏 。 


而 这 本 书 ， 融 是 他 们 在 实践 中 逐步 提炼 出 来 的 经 验 总 结 。 


我 相信 ， 他 们 是 一 群 最 了 解 新 手 设计 师 成 长 经 历 的 人 。 我 也 希望 ， 这 本 书 能 够 给 
新 手 设计 师 市 来 更 多 的 价值 ， 帮 助 新 手 设 计 师 快速 提升 自我 ! 


董 景 博 
UI 中 国 用 尸体 验 设计 平台 创始 人 、CEO 


人 


By 


ll 


我 们 的 初衷 


随 着 移动 蜂 的 变 曾 ，UI1 设 计 行 业已 经 从 新 兴 期 逐步 进入 成 熟 期 ，UI 设 计 师 已 经 不 
再 是 稀缺 性 人 才 ， 行 业 门 槛 也 变 得 越 来 越 高 。 有 辛 的 是 ，2016 年 我 们 在 “海盐 社 ” 相 
遇 。 初 期 我 们 只 是 想 提升 目 己 对 知识 的 巩固 和 整理 能 力 ， 坚 持 着 每 周一 篇 文章 的 分 享 交 
流 。 然 而 我 们 惊喜 地 发 现 ， 我 们 的 分 享 被 越 来 越 多 的 人 关注 、 转 发 、 扣 赞 。 这 让 我 们 可 
以 很 好 地 解答 每 个 读者 的 问题 ， 同 时 也 使 我 们 上 自身 对 知识 的 了 解 更 加 深入 ， 对 我 们 来 说 
这 是 意外 的 提升 。 通 过 不 断 收集 读者 反馈 我 们 友 现 ， 我 们 的 文章 可 以 帮助 到 一 些 刚 入 行 
的 UI 设 计 师 。 将 目 我 提升 的 分 享 优化 为 可 以 帮助 新 设计 师 的 经 验 总 结 ， 便 有 了 现在 的 
这 本 书 。 


我 们 的 腕 点 

对 于 出 书 ， 我 们 初期 也 是 犹 陶 再 三 ， 因 为 市 面 上 的 设计 类 书籍 以 大 厂 出 品 居多 ， 书 
中 的 内 容 也 十 分 优秀 ， 可 它们 对 于 部 分 初级 的 设计 师 来 说 ， 实 践 时 会 存在 很 多 的 阻碍 。 
所 以 我 们 党 得 ， 应 该 有 一 本 让 更 多 初级 设计 师 可 以 用 到 的 书 。 我 们 并 非 来 自 大 厂 ， 相 反 
都 是 在 创业 公司 中 混迹 的 设计 师 。 为 了 让 上 自己 不 断 提升 ,我们 努力 沉 演 看 经 验 ; 为 了 让 
初级 设计 师 少 走 这 路 ， 我 们 把 曾经 碰 到 的 问题 逐个 遭 来 ， 由 浅 入 深 地 和 大 家 讲 讲 UI 设 
计 那 些 事 儿 。 


本 书 的 结构 
第 1 章 “ 移动 端 组 件 的 认识 与 运用 ”， 主 要 是 对 入 行 不 久 的 设计 师 做 一 个 基础 知识 
的 普及 ， 市 你 深入 理解 昔 用 组 件 的 特性 及 使 用 场景 ， 快 速 降 低 镑 误 使 用 的 概率 。 


IV 
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第 2 章 “ 能 力 效率 提升 “， 主 要 介绍 当 我 们 在 日 单 工 作 、 学 习 中 遇 到 问题 和 瓶颈 
时 ， 可 以 通过 哪些 方法 来 解决 。 而 为 什么 相同 的 方法 ， 不 同 的 人 使 用 起 来 却 相差 甚 远 ， 
我 们 也 会 对 这 个 问题 的 根源 进行 剖析 。 


第 3 章 “ 设 计 理 论 与 实践 ”， 主 要 介绍 设计 领域 实用 的 理论 知识 ， 帮 助 大 家 理解 
优秀 设计 的 内 部 规律 ， 让 你 在 展示 方案 时 更 具 襄 服 力 。 


第 4 章 “ 工 作 困惑 ”， 针 对 设计 师 在 不 同 工 作 阶段 遇 到 的 困惑 ， 我 们 分 享 了 自己 的 
建议 。 对 照 我 们 的 建议 ， 结 合 目 身 的 经 历 去 思考 、 运 用 ， 相 信 你 能 有 进一步 的 收获 。 


参与 本 书 编写 的 作者 有 吴 明 、 付 铂 下 、 妆 正 、 刘 芳 。 这 是 我 们 四 位 设计 师 第 一 次 与 
书 ， 我们 基于 公众 号 中 的 精 选 文章 加 以 精 修 ， 无 论文 字 还 是 案例 都 会 是 全 新 的 体验 ,项 
望 可 以 真正 帮助 大 家 在 设计 工作 中 解决 更 多 的 困难 。 
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01 搜索 


文 / 付 铂 现 


目前 ， 搜 索 是 每 个 应 用 产品 不 可 缺少 的 一 部 分 ， 同 时 也 是 用 户 经 常 使 用 的 功能 。 一 个 好 的 
搜索 设计 能 够 提高 转化 率 ， 提 升 用 户 体验 。 下 面 来 看 看 搜索 设计 的 一 些 套 路 。 


搜索 入 口 的 设计 样式 


搜索 入 口 的 设计 与 搜索 功能 在 产品 中 的 位 置 密切 相关 ， 不 同 的 应 用 场景 所 使 用 的 搜索 入 口 
样式 也 是 不 同 的 ， 下 面 介 绍 四 种 常用 的 搜索 入 口 样式 。 


1. 底部 标签 栏 入 口 


把 搜索 功能 作为 底部 标签 栏 中 的 一 个 功能 模块 ， 适 合 将 搜索 作为 重要 流量 入 口 的 App， 同 
时 也 可 以 与 其 他 的 功能 模块 入 口 相 结合 ， 如 下 图 所 示 : 


Q App Store 


App Store 布 卡 漫画 


“ 布 卡 漫画 ”就 是 把 搜索 和 其 他 小 的 功能 模块 入 口 相 结合 ， 如 热 榜 、VIP 专 区 等 。 底 部 搜 
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索 入 口 本 身 并 没有 搜索 功能 ， 因 此 常常 会 与 搜索 框 样式 相 结 合 使 用 。 


2. 搜索 框 导航 入 口 

这 是 常见 的 展示 形式 之 一 ， 将 搜索 入 口 以 输入 框 的 形式 放置 在 导航 栏 中 或 者 导航 栏 下 方 ， 
有 些 应 用 即便 界面 向 上 滑动 时 ， 搜 索 框 仍 会 吸 顶 显 示 ， 方 便 用 户 随 时 操作 ( 是 否 吸 顶 显示 
要 根据 搜索 功能 在 应 用 中 的 权重 而 定 ) ， 如 下 图 所 示 : 


化 汶 即刻 


搜索 框 导航 入 口 除 了 必须 要 有 的 输入 框 外 ， 还 需要 一 个 搜索 图 标 给 予 用 户 提 示 。 目 前 很 多 
应 用 也 会 利用 搜索 框 内 的 区 域 显 示 预 设 文案 ， 作 为 提示 用 户 的 关键 词 ， 也 可 以 作为 运营 的 
入 口 来 展示 。 


3. 搜索 图 标 入 口 

这 同样 也 是 常用 的 搜索 方式 ， 常 见 形 式 是 将 一 个 放大 镜 的 图 标 放 在 导航 栏 的 右 侧 。 相 对 
上 面 提 到 的 搜索 框 ， 它 在 视觉 引导 上 略 逊 一 筹 ， 但 节省 了 导航 栏 的 空间 ， 让 导航 栏 可 以 
为 用 户 提供 更 多 的 功能 ， 适 用 于 搜索 权重 不 局 的 应 用 中 。 当 然 也 有 特别 的 搜索 图 标 方 
式 ， 例 如 自如， 同样 是 搜索 图 标 ， 由 于 不 同 的 位 置 和 层级 变化 ， 入 口 变 得 更 加 突出 ， 如 
下 图 所 示 : 
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目 如 TIM 


4. 隐藏 的 搜索 入 口 

为 了 让 用 户 更 多 地 使 用 桌面 提供 的 快速 入 口 ， 一 些 设计 中 的 初始 界面 将 搜索 功能 隐藏 ， 滑 
动 界 面 时 才 会 出 现 搜索 功能 。 例 如 iPhone 手机 解锁 后 的 界面 是 各 个 应 用 入 口 ， 当 向 右 滑 
动 时 ， 隐 藏 的 搜索 入 口才 会 出 现 ， 如 下 图 所 示 : 


加 一 


11 月 16 日 星期 外 


iPhone 
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搜索 方式 


搜索 方式 就 是 我 们 通常 会 用 哪些 方法 去 搜索 要 找 的 东西 ， 下 面 介 绍 三 种 常用 的 搜索 
万 式 。 


1. 文字 搜索 


文字 搜索 是 主要 且 常 用 的 搜索 方法 ， 通 过 在 输入 框 中 输入 关键 字 进 行 精准 搜索 。 当 点 击 输 
入 框 时 ， 激 活 输入 键盘 ， 如 下 图 所 示 : 


999## 中 国 移动 全 下 午 7:46 了 三 mm eeee 相国 宫 动 全 下 午 7:47 1 
你 好 取消 O， 天 猎 精 灵 9 取消 
你 好 李 焕 英 未 删 减 版 综合 文章 ”快讯 ”音频 视频 ”作者 
你 好 邻居 视频 发 布 时 间 | 相关 性 
你 好 李 驳 双 11 消 费 电 子 行业 的 销量 第 一 为 智能 音箱 天 猫 
你 好 邻居 ee 
bli 阿里 、 苏 宁 合作 再 加 深 ， 天 猫 精 灵 首 入 苏宁 
你 好 疯子 电影 极 物 
你 好 中 国 韩国 综艺 
你 好 生活 家 阿里 巴巴 发 布 天 猫 精灵 “太空 蛋 ” 

你 好 而 潮 宫 di 

我 我 是 的 了 的 人 是 看 仆 的 们 王子 属性 之 般 是 人 

qiwie rit'iylu,iloip qiwieliritiyiu ilioip 


Sr 


alslidlif1glihlJlkll 


一 


网 易 新 闻 36 氟 


2. 语音 搜索 

语音 搜索 不 仅 提 升 了 搜索 的 便利 性 ， 也 解决 了 老人 和 不 会 拼音 的 人 群 的 问题 。 另 外 ， 在 音 
乐 类 App 中 语音 搜索 功能 得 到 了 更 好 的 运用 ， 无 论 是 在 街 边 商场 还 是 酒吧 ， 当 我 们 听 
见 喜 欢 的 歌曲 时 ， 可 以 用 语音 搜索 功能 进行 歌曲 识别 ， 随 时 找到 这 首 歌 曲 的 名 字 ， 如 下 


辐 所 示 : 
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4 上 中 国联 通 一 上 午 12:30 @7 5% 


各 入 FM 起 日 准 荐 


3. 图 像 搜 索 

首 助 图 像 识 别 技术 ， 图 像 搜 索 也 得 到 了 广泛 的 应 用 。 例 如 ， 我 们 可 以 通过 对 图 片 进 行 担 照 
搜索 到 有 天 它 的 信息 或 者 是 和 它 相似 的 图 片 ; 还 有 电 商 应 用 中 常用 到 的 ， 对 于 无 法 准确 摘 
述 的 商品 ， 可 以 通过 图 像 搜索 找到 该 物品 。 蘑 姑 街 中 束 可 以 通过 对 现实 物体 拍照 来 找到 想 
要 的 物品 ， 如 下 图 所 示 : 


四 人 答 信 wil 令 20:46 " 下 午 11:46 个 了 41% 而 


衬衫 马甲 口红 


袜子 裤子 
®@ 日， 
符号 。 ABC 
GHI JKL 
PQRS TUY 


搜索 的 辅助 功能 


基于 用 户 不 同 的 搜索 场景 ， 需 要 给 出 不 同 的 搜索 辅助 ， 一 个 好 的 搜索 辅助 ， 会 让 用 户 爱 上 


第 1 章 ”移动 端 组 件 的 认识 与 运用 


你 的 应 用 。 下 面 就 来 介绍 五 种 常用 的 搜索 辅助 功能 。 


1. 热门 搜索 


热门 搜索 常见 于 搜索 量 比 较 大 或 者 运营 人 员 想 让 用 户 搜 到 的 信息 ， 同 时 给 那些 无 目的 的 用 


户 更 多 的 选择 ， 如 下 图 所 示 : 


.seee 站 中 入 动 全 下 午 753 1 me 


1. 林 书 豪 5000 分 国 

2, 火箭 大 胜 勇 士 

3 红 黄 蓝 股 价 暴跌 
古天乐 颈椎 移 位 
张 檬 回应 整容 
楼 桃 小 丸子 作者 


C 因 向 乔治 娜 求婚 


qiliwlielrltliylulilolp 


De et 


Dp Pe om ya 


2. 搜索 历史 


“eeee 中 国 夭 动 全 下 午 7.53 71> mm 

a 取消 

热门 搜索 
新 经 济 NEO100 小 米 发 布 会 
马 化 鹏 知 平 马蜂 离 新 电 两 法 
双 十 一 

儿 素 历 去 让 
天 猫 精 灵 


我 你 在 这 一 是 不 有 丰 人 


qiliwlielrlitlyliulllolp 


人 


De Am Nm ea me 


通过 搜索 历史 ， 用 户 可 以 看 到 自己 每 次 查找 的 记录 ， 方 便 再 次 查看 ， 如 下 图 所 示 : 
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weese 中 国 移动 他 下 午 8:10 Tm eeeee 中 国 称 动 他 下 午 8:09 T 省 
Q po018 天 猫 双 11 狂 欢 夜 昌 。 取消 捕 输入 要 搜索 的 词 [名 ”取消 
规 索 历史 ee 全 部 天 猫 店铺 

但 仇 者 联盟 3 。 。 复仇 才 联盟 历史 搜索 

生理 

热 搜 ”局 集 综艺 电影 动漫 少儿 

中 悲伤 逆流 成 河 + 

全 秦 时 明月 之 君临 天 下 四 

加 火影 忍者 四 下 + 

@ 原来 你 还 在 这 里 臣 可 + 

QIWIEIRITIYIUIIIOIP QIWIEIRITIYIUIIIOIP 
AISIDIFIGIHIJIKIL AISIDIFIGIHIJIKIL 
tt zxcveNMg t zxcveNMg 


OE OE 


优酷 淘宝 


3. 猜 你 喜欢 
猜 你 喜欢 根据 收集 的 用 户 记录 为 用 户 提供 相关 的 内 容 ， 减 少 用 户 的 思考 时 间 ， 同 时 也 为 用 
户 带 来 贴心 的 感觉 ， 如 下 图 所 示 : 


sl 中国 联通 倒 20:46 全 了 了 44 和 本 外 关 通 4 20:53 Po 十 到 


呈 。 轩 


于 文 华 高 弘 熙 水 泡 脚 有 .… 油价 四 年 .… 


历史 记录 向 
连衣裙 。 手机 ”四 忻 膏 。 ”空调 各 国 费 用 贤 哥 话 留学 
客厅 灯 ”口红 小 白 鞋 ”双肩 包 狂 你 想 搜 的 
电 风 局 文 购 “行车 记录 仪 。。 洗 发 水 洗 完 头 结账 17000 元 退伍 军龄 怎么 算 
手机 党 。 ”牛仔裤 什么 血型 的 人 最 … 马 昔 王宝强 
香 投 住 说 出 你 要 的 宝 见 女童 遭 同班 男孩 .… 找 回 删 除 照 片 
G 加 0 I 图 误 四 叫 UU PP © 霹 
符号 ABC DEF © 符号 ABC DEF © 
GHI JKL MNO 清空 GHI JKL 
i 2 
I PQRS TUV WXYZ 1 PQRS TUV 
起 123 多， 中 /x 种 123 + 


天 猫 今日 头条 


4. 促进 式 搜 索 
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弟 进 式 搜索 通过 点 击 系 统 提供 的 辅助 字段 ， 逐 渐 缩 小 搜索 范围 ， 对 输入 模糊 关键 字 的 用 户 
也 提供 了 很 好 的 提示 ， 使 其 更 快 地 找到 目标 ， 如 下 图 所 示 : 


[EE 下 午 11:35 人 7 50% 夯 了 


鞋子 女 2018 新 款 
鞠 子 女 幕 版 
葵 架 


鞋子 男 潮 鞋 


鞋子 女 学 生 百 搭 


六 子女 春秋 百 括 (&) 


身子 跟 套 面 厂 底 区 人 


四 得 素 ll 三 下 午 11:35 售 了 50% 夯 小 
鞋子 列 加 ”取消 


鞋子 男 

性 子 男 潮 烤 
鞋子 男 休 闲 鞋 
鞋子 男 埠 版 源流 百 阁 
肚子 男 运动 鞋 

圣 子 男 透 气 防臭 


鞋子 男 山 布鞋 


竺 子 男 春季 (&) 


ee 


5. 类 别 搜索 


当 应 用 中 涉及 搜索 内 容 的 信息 较 多 时 ， 可 以 添加 类 别 搜索 功能 ， 让 用 户 先 选择 类 别 ， 然 后 
再 进行 搜索 ， 可 以 更 快 更 精准 地 搜索 到 相关 内 容 ， 如 下 图 所 示 : 


e0000 中 国 移动 全 上 午 12:11 13 
Q 2018 天 猫 双 11 狂 欢 夜 曙 取消 
搜索 历史 清空 自 


复仇 者 联盟 3 复仇 者 联盟 


热 搜 ”局 集 综艺 电影 动漫 少儿 
0 悲伤 逆流 成 河 + 
@ 素 时 明月 之 君临 天 下 臣 加 

加 火影 忍者 下 4 
人 原来 你 还 在 这 里 四 下 


人 (人 习 蒙 面 唱 将 猜 狂 猜 御 三 季 


was 宁国 符 动 全 上 午 12:07 7 
租房 a | 取消 
租房 
民 窗 天 通 苑 霍 营 回龙观 


光照 门 通州 北 关 宋 家 庄 


物资 学 院 路 


大 家 都 在 搜 


自如 总 部 
公司 企业 - 朝阳 区 


我 你 豆瓣 天 猫 蘑菇 街 在 个 
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搜索 结果 展示 形式 


从 搜索 结果 来 看 ， 依 然 有 很 多 种 展示 形式 ， 如 文子、 图片、 模块 、 视 频 等 。 了 解 不 同样 式 
后 ， 可 以 根据 不 同 的 应 用 类 型 来 选择 合适 的 搜索 结果 的 展示 形式 。 


1. 文字 类 


文字 类 主要 以 文字 拉 述 展示 搜索 结果 ， 多 用 在 新 闻 类 、 和 音乐 类 应 用 上 。 因 为 用 户 搜索 的 是 
天 键 字 或 歌曲 本 身 的 名 字 ， 图 片 对 用 户 来 说 意义 并 不 大 ， 如 下 图 所 示 : 


ssess 中 国之 动 全 下 午 8-32 7 Wm 
〇 阿里 巴巴 xX 取消 
综合 ”文章 天 讯 《音频 。 视 上 作者 
文章 
超级 买 家 阿里 巴巴 


++ 的 3.49 亿 元 融资 ; 1 月 初 ， 阿 里 巴巴 领 投 魔 点 科技 的 
数 千 万 元 融资 。 去 年 10 月 ， 了 旷 视 科技 还 散 得 来 自 蚂 蚁 金 


阿里 巴巴 和 蚂蚁 金 服 表示 专注 技术 ， 否 认 发 
CC 币 、 淘 宝 币 


，APP 下 载 ) 。11 月 13 日 晚 ， 针 对 网 上 流传 的 阿里 巴 
书 和 蚂蚁 金 服 将 要 发 行 CC 币 、 淘 宝 币 的 传闻 


18-11-14 
阿里 巴巴 和 亚 马 进 ， 终 有 一 战 


元 。2014 年 ， 滴 滴 和 快 的 分 别 接受 了 腾讯 和 阿 旦 已 书 
的 投资 。 展 开 了 疯狂 的 烧 钱 大 战 ， 滴 滴 通 过 天 价 补 贴 … 


2. 图 片 类 


单 曲 视频 专辑 歌 单 歌手 用 


渐渐 的 
Fa 马 绪 真 ， 潮 渐 的 


渐 洒 的 
王 翔 渐渐 的 


89 站 (你 的 阴影 ) 


sa 下 CE (Car, the gerden) LITTLE BY LITTLE (渐渐 ) 


The Road Not Taken 
Fa 名] Paul Reece ， 渐渐 


ra 
?区 三 弥 外 ,北山 艇 ,加配 和 彦 , 有 并 地 了 晴 
于 了 [六 子 ], 石原 美和 , 母 里 由 美 子 , 母 里 由 菜子 


7ill， 肉 公 肚子 襟 川 森 S37 三 371 
没 提 到 满 窗 结 里 ?告诉 我 们 


QQ 音乐 ， 让 生活 充满 音乐 


QQ 音乐 


图 片 类 主要 以 图 片 展示 为 主 ， 用 户 会 因为 看 到 感 兴趣 的 图 片 点 击 查 看 ， 所 以 多 用 企 购 物 、 


资讯 、 电 影 等 应 用 中 ， 如 下 图 所 示 : 


中 中 国 移动 全 21:44 TY oT ss 


< 相 子 搜索 


中 :智利 J 级 车 厘 子 450g 


甜美 多 汁 的 智利 "国宝 - 


ee © 


Y36.9 mn 


宣 嫂 草莓 3509 


源 自 日 本 青冈 草莓 界 香奈 儿 


a © 


¥25.9 mn 


越南 红 肉 火龙 果 320g 起 


一 手 能 掌握 的 红 肉 必 


¥99 © 


¥6.9 Wm 


泰国 龙眼 500g*1 盒 


每 日 优 鲜 


3. 模块 类 
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sg 中国 攀 动 售 21:44 TH6%l )y 


《  O 面膜 全 
全 部 商品 用 户 


# 面膜 红 黑 榜 ”人 平价 面膜 。 # 数 数 你 有 多 少 面 简 ” # 一 起 


Te 
日 本 药 妆 店 必 败 40 款 面 品 平价 网 红 面 各 精 选 测评 
采 ! 超 详解 说 ! 持 线 更 新 (敏感 肌 也 能 用 ) 虽然 在 护肤 
移 表 小 许 jun900105 中 23533 先导 汁 小 王子 D214703 


模块 类 主要 用 于 包含 多 类 别 的 应 用 ， 例 如 在 得 到 App 上 进行 搜索 时 ， 输 入 “人 类 人 简 史 ”会 
发 现 有 两 个 类 别 ， 一 个 是 电子 书 ， 一 个 是 课程 。 所 以 对 于 多 类 别 的 应 用 ， 我 们 应 该 扩大 搜 
索 范 围 并 分 类 别 展 示 ， 让 用 户 可 以 通过 分 类 更 准确 地 查找 想 要 的 信息 ， 如 下 图 所 示 : 


sswew 中 国 移动 全 下 午 8:28 了 
〇 人 类 简 史 © 取消 
发 现 99+ ” 谍 程 内 容 99+ 已 购 用 户 2 
加 课程 
吴 伯 凡 - 认 知 方法 论 


什么 会 成 为 圣地 ? 六 人 燃 辜 多》 中 最 重要 的 概念 . 


用 严 伯 钓 .西方 艺术 课 
帮助 你 快速 学 习 和 享受 人 类 艺术 精华 。 让 绘画 、.. 


骨 电子 书 更 多 电子 书 ) 


国人 类 简 史 : 从 动物 到 上 帝 
和 皇 【人 类 简 史 从 动物 到 上 帝 》 是 以 色 列 新 锐 历史 学 . 


富英 人 类 简 史 ; 从 远古 到 二 十 一 世纪 
限时 6 折 」 另 一 本 《人 类 疝 史 》 ，、 哥 伦比 亚 大 学 历 ,.. 


未 来 简 史 
的 兴趣 .他 的 《人 美 简 史 》 一 书 让 他 一 些 成 名 ， 


轿 书 单 更 多 韦 单 ) 


-ewew 宁国 移动 全 下 午 8:29 17173 mm 
局 复 娄 者 四 取消 
电影 | 电视 副 / 综 艺 


复仇 者 联盟 国 “~ 8.8 分 


The Avengers 
别名 : 复 八 者 
动作 ,科幻 ,冒险 


2012-05-05 太 山上 肤 
图 书 
十 复仇 者 8.8 分 
Fm 


复仇 者 联盟 4 国 员 158503 人 起 看 


Untitled Avengers Movie 
动作 ,科幻 ,奇幻 ,冒险 
2019-05-03 秽 国 上 了 遇 【 起 看 ) 


复仇 者 联盟 3: 无 限 ...。 加 wx 8.92 


AvengersInfinity War 


动作 ,冒险 ,科幻 
2018-05-11 大 陆 上 了 映 


查看 全 部 71 部 影视 剧 结 果 》 
弗 - 福 亚 斯 着 
2004-01 碧海 出 版 社 出 版 


闻 谨 刘 : 和 握 们 老 AR 


猫眼 
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4. 视频 类 

下 面 要 说 的 比较 特殊 ， 通 常 只 有 在 视频 类 的 应 用 中 出 现 。 因 为 用 户 搜 索 视频 的 目的 较为 明 
确 ， 同 时 搜索 出 的 结果 也 不 会 多 样 化 ， 所 以 在 此 界面 可 放 入 更 多 的 操作 按钮 方便 用 户 进 行 
选择 观看 ， 如 下 图 所 示 : 


seeee 中 国 移 动 今 下 午 8:25 Tm seeee 中 国 移动 守 下 午 8:26 7 
< 火影 忍者 Q 复仇 者 联盟 3 取消 
全 部 剧 综 影 漫 ”主题 ”创作 者 精 选 ”电影 游戏 娱乐 动漫 | Y 筛选 


7 复仇 者 联盟 3: 无 限 战争 


二 aP Ax 
右 


mm- 二 复仇 者 联盟 2: 奥 创 纪元 


2017 


开辟 优酷 


男 重 氮 


(1) 搜索 入 口 的 设计 样式 : 搜索 入 口 的 设计 需要 根据 搜索 功能 在 产品 中 的 位 置 而 定 ， 不 
同 的 应 用 场景 所 使 用 的 搜索 入 口 样式 也 是 不 同 的 ， 常 用 的 四 种 为 :底部 标签 栏 入 口 、 搜 索 
框 导 般 入口、 搜索 图 标 入 口 、 隐 藏 的 搜索 入 口 。 


(2) 三 种 常用 的 搜索 方式 : 文字 搜索 、 语 音 搜索 、 图 像 搜 索 。 
(3 ) 五 种 搜索 的 辅助 功能 : 热门 搜索 、 搜 索 历 史 、 猜 你 喜欢 、 递 进 式 搜 索 、 类 别 搜 索 。 
(4 ) 四 种 搜索 结果 展示 形式 : 文字 类 、 图 片 类 、 模 块 类 、 视 频 类 。 


通过 上 面 对 搜 索 功 能 的 分 析 可 知 ， 无 论 在 哪个 阶段 ， 都 要 对 应 用 本 身 的 适用 人 群 、 类 型 、 
功能 权重 等 进行 多 维度 分 析 ， 才 能 设计 出 更 合理 的 搜索 。 所 以 搜索 样式 的 本 身 没有 好 坏 之 
分 ， 在 不 同 的 场景 下 ， 选 择 最 合适 的 形式 才 会 提升 搜索 体验 ， 让 用 户 搜索 得 更 快 、 更 准 。 
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02 加 载 


文 / 付 铂 更 


加 载 的 作用 是 及 时 向 用 户 反 馈 当 前 的 系统 状态 ， 绥 解 用 户 的 等 待 焦虑 ， 以 提升 产品 的 用 户 
体验 。 但 设计 师 经 单 会 忽略 加 载 界 面 的 重要 性 ， 其 实 不 同 的 加 载 对 缓解 用 户 焦虑 、 提 升 用 
户 体 验 有 何不 同 ， 还 是 我 们 需要 深度 了 解 的 。 


什么 是 加 载 ? 


用 尸 在 客户 端的 界面 上 进行 操作 ， 客 户 端 友 送 请 求 到 服务 器 ， 服 务 器 处 理 请 求 ， 返 回 数据 
并 显示 给 用 户 。 这 一 过 程 称 为 加 载 ， 简 单 说 就 是 用 户 与 产品 每 次 互动 时 的 等 待 时 间 。 还 要 
说 明 一 点 ， 加 载 和 缓存 是 有 区 别 的 ， 缓 存 是 主动 的 ， 加 载 为 被 动 的 。 


加 载 的 设计 样式 


1. 状态 栏 加 载 


状态 栏 加 载 是 系统 默认 的 配置 加 载 样式 。 通 常 企 网 络 不 好 时 ， 手 机 顶部 会 出 现 的 加 载 样式 
如 下 图 所 示 : 


状态 栏 加 载 


2. 导航 栏 加 载 
将 导航 栏 标题 临时 变 成 加 载 信息 的 文字 提醒 ， 当 收取 信息 时 标题 栏 展示 “收取 中 ”等 正在 
加 载 提 示 ， 加 载 成 功 则 提示 消失 ， 若 因为 网 络 错误 未 连接 服务 器 ， 则 在 标题 栏 显 示 未 连接 
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> 上 午 10:26 100% 故国 


wl 寺 
, 微 信 (未 连接 ) 中 
打卡 8:45 小 溜 Epik 
上 班 打卡 提醒 [图 片 ] 


企业 微 信 微 信 
使 用 场景 : 多 用 于 社交 类 产品 ， 这 类 信息 的 收取 不 需要 获取 用 户 的 视觉 焦点 。 
3. 下 拉 刷 新 加 载 


下 拉 刷 新 已 经 在 App 中 被 普遍 应 用 ， 保 证 了 用 户 既 可 以 看 到 本 地 的 内 容 ， 也 可 以 选择 主动 下 
拉 对 当前 内 容 进行 更 新 ， 加 载 的 样式 也 可 以 做 出 进一步 的 设计 。 例 如 ， 美 团 就 运用 了 产品 形 
象 作为 刷新 的 样式 ， 增 加 了 品牌 形象 的 宣传 ， 使 得 加 载 过 程 更 加 情感 化 、 人 性 化 、 品 牌 化 。 
还 有 新 版 的 美 团 外 卖 加 入 了 红绿灯 的 小 动 效 ， 时 刻 提醒 人 们 红 灯 停 、 绿 灯 行 ， 如 下 图 所 示 : 


weeee 中 国 移动 全 下 午 4:50 1 忆 D *eeee 宁国 移动 全 下 午 4:28 了 书号 


E O° 宇 气 优 23 >、 而 
G9 多 去 网 网 更 新 


美 团 美 团 外 卖 


使 用 场景 : 界面 信息 可 以 刷新 加 载 时 使 用 ， 多 用 于 含有 列表 的 界面 当中 。 


4. 上 拉 加 载 

这 是 最 常用 的 加 载 ， 当 用 户 想 查 看 新 的 数据 时 ， 通 过 上 拉 界 面目 动 加 载 出 数据 的 过 程 称 为 上 
拉 加 载 。 上 拉 加 载 的 设计 样式 越 简 单 越 好 ， 因 为 用 户 在 看 当前 界面 的 内 容 时 ， 下 面 未 显示 的 
部 分 内 容 已 加 载 完毕 ， 加 载 提 示 会 很 快 消失 ， 所 以 不 必 设 计 过 于 复杂 的 样式 ， 如 下 图 所 示 : 


类 努力 加 载 中 -. 


美 团 外 卖 网 易 新 闻 
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使 用 场景 : 瀑布 流 、 列 表 等 情况 。 


5. 进度 条 加 载 


如 果 加 载 的 过 程 耗 时 较 长 ， 就 需要 用 进度 条 加 载 样式 来 告知 用 户 需 要 等 待 的 时 间 进 度 ， 让 


用 户 有 一 定 的 心理 准备 ， 如 下 图 所 示 : 


*eeee 中 国 移动 全 > 下 午 4:56 71 号 DD *eeee 中 国 称 动 全 下 午 4:58 2») 
9 东 二 环 ~ QQ 找 附 近 的 吃喝 玩乐 < 
美 团 美 团 外 卖 


使 用 场景 : 多 见于 浏览 器 ， 包 括 PC 端 和 移动 端 浏览 器 。App 中 的 页 面 如 果 是 用 H5 形 式 做 


的 ， 多 数 都 会 采用 进度 条 进行 加 载 。 


6. Toast 加 载 


当 用 户 执行 肤 个 操作 时 ， 为 了 防止 用 户 继续 操作 导致 数据 加 载 失 败 ， 则 用 Toast 的 样式 提 
示 正 在 加 载 ， 在 这 段 时 间 内 用 户 的 操作 将 受到 限制 。 这 种 情况 用 户 一 般 只 能 执行 返回 到 上 


一 级 的 操作 ， 其 他 都 被 禁用 ， 如 下 图 所 示 : 


无 SIM 卡 令 下 午 5:33 © 


飞 猪 天 猫 
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使 用 场景 : 关键 性 场景 中 ， 防 止 用 户 进 行 多 余 的 操作 。 例 如 登录 、 注 册 、 提 交 信 息 、 支 
付 等 。 


7. 日 屏 加 载 


如 果 当 前 页 面 内 容 比较 单一 ， 需 要 一 次 加 载 完 成 才能 显示 ， 则 采用 日 屏 加 载 模式 。 这 种 加 
载 方式 在 完全 加 载 完成 之 前 是 看 不 到 任何 内 容 的 ， 所 以 一 旦 时 间 太 久 一 定 要 提示 用 户 是 什 
么 原因 加 载 失 败 〈 可 以 配合 Toast 弹 窗 提示 ) ， 而 不 是 一 直 加 载 。 也 可 以 将 等 竺 图标 做 得 
更 有 趣味 性 ， 减 轻 用 户 的 等 待 焦虑 ， 如 下 图 所 示 : 


| 《 安 地 
GO) 人 
A 日 人 站 《 Ws 
酷 家 乐 马蜂 窜 


使 用 场景 : 页 面 跳 转 时 ， 用 日 屏 加 载 。 


8. 预 设 图 片 加 载 

加 载 时 ， 为 了 不 让 加 载 出 的 布局 显得 太空 ， 会 用 logo 或 者 预 设 图 片 来 填充 ， 加 深 用 户 对 品 
牌 的 认 知 。 大 家 或 许 会 有 这 样 的 疑 回 ， 为 什么 同样 是 图 片 加 载 不 直接 用 展示 图 ， 而 先 用 预 
设 的 图 片 呢 9? 那 是 因为 预 设 图 通常 是 由 前 端 代 码 写 的 ， 调 用 起 来 会 比较 快 ， 而 产品 图 是 需 
要 从 后 台数 据 库 调用 的 ， 比 较 慢 。 青 有 就 是 为 了 提升 品牌 的 认 知 度 ， 如 下 图 所 示 : 


回 到 明 朝 当 王 敬之 杨凌 传 ” 是 哈 的 ， 法 官 阁下 
等 劲 夫 寡 冰 敌 高 甜 “ 狗 四 ” 青年 律师 梁 烈 唯 闪 亮 登场 
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eccoo 中 国 物 动 令 下 午 59 7 


只 
SJ99 © 
生 揣 木 沫 林内 零食 。。 始 融 本 钦 。 ”粮油 图 房 。 农用 电器 。。 多 如 期 # 
ve ww "~ ww 


《 三 ”Q 日 用 百人 满 99 减 50 


寻 哈 哈 AD 钙 奶 护 衣 宝 棉 柔 极 科 
220gx1 枝 但 片 xt 包 


1s Ow © 


Fi 
蓝 月 亮 Ikg 洗 胡 液 。 ” 推 达 立体 美 压 花 ,.， ” 维 达 手帕 约 3 层 .， 
ikgx 人 0 150gx1 汰 8 张 x10 包 


‘269 O25 O's © 
加 


a Sr 


痢 吕 


% 8 


天 猫 超市 


使 用 场景 : 当 页 面 的 布局 固定 时 ， 常 采用 这 种 刷新 样式 ， 也 多 用 于 图 片 多 的 界面 。 


9. 色 块 加 载 


首先 我 们 要 知道 同样 大 小 的 色 块 加 载 要 比 图 片 快 很 多 ， 因 为 纯色 色 块 是 可 以 直接 用 代码 写 
出 来 的 ， 调 取 一 段 代码 的 速度 比 调 取 一 张 图 片 的 速度 快 很 多 ， 所 以 在 图 片 刷 新 的 过 程 中 ， 
将 未 加 载 出 来 的 内 容 区 域 用 色 块 填充 ， 在 加 载 过 程 中 有 很 好 的 连贯 性 。 当 然 运用 这 种 形式 
的 加 载 是 有 条 件 的 ， 需 要 内 容 框架 是 固定 的 ， 如 下 图 所 示 : 


see ) 中 国 移动 全 下 午 3: 
北京 局 区 /而 圈 ， 
合租 
自如 高 
保洁 
接 训 
民宿 
前 页 


自如 


3 无 SiM 卡 下 午 5:21 全 了 7 计 负 
加 名 规 索 花 巡 
点 击 查 看 源 网 页 
二 
整 租 
豪放 
baby 
维修 
自如 哪 


化 办 
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使 用 场景 : 内 容 框 染 固 定 的 前 提 下 使 用 。 


10. 模糊 加 载 


把 预 加 载 出 来 的 图 片 进行 高 斯 模糊 处 理 ， 通 常人 们 对 这 类 似 有 似 无 的 图 片 都 会 给 予 极 


大 的 耐心 去 等 待 ， 这 种 方案 成 功 引 起 了 用 户 的 好 奇 心 ， 减 缓 了 用 户 的 等 待 焦虑， 如 下 
图 所 示 : 


小 州 中 国 访 信 4G 下 午 6:03 5 95% BM)s 
QQ ” 搜 " 西 西里 岛 " 试 试 


ee 隶 筑 大 和 


tipi 
@ en ps 


0 re 素 国 i 和 自 


台北 白天 的 "地 宗 "cafe， 夜 ”吉隆坡 用 唐人 
~ (J 


爱 彼 迎 


使 用 场景 : 多 图 的 界面 中 。 


加 载 方 式 


1. 预 加 载 


预 加 载 就 是 当 用 户 在 浏览 A 页 面 时 ， 加 载 并 未 停止 ， 而 是 在 悄悄 地 为 用 户 加 载 B 页 面 中 的 
内 容 ， 当 用 户 继 续 看 B 页 面 时 就 体会 不 到 加 载 的 过 程 ， 用 户 不 存在 等 竺 的 焦虑 问题 。 当 然 
几 事 有 利 必 有 星 ， 如 果 服 务 器 为 用 户 提 前 准备 了 将 要 看 的 内 容 ， 用 户 却 看 了 其 他 界面 或 者 
退出 了 ， 那 这 次 的 加 载 既 增加 了 服务 器 的 压力 ， 又 浪费 了 用 户 的 流量 。 
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2. 懒 加 载 


懒 加 载 和 预 加 载 刚 好 相反 ， 只 加 载 用 户 可 以 看 到 的 内 容 ， 其 他 内 容 斋 要 用 户主 动 进行 操 
作 ， 向 服务 器 提供 需求 后 ， 才 会 自动 加 载 。 懒 加 载 通常 用 在 上 划 刷 新 和 下 拉 刷 新 上 。 懒 加 
载 的 速度 要 看 界面 中 内 容 的 多 少 以 及 图 片 的 大 小 ， 所 以 我 们 在 提供 图 片 时 都 会 进行 一 定 的 
压缩 ， 来 加 快 加 载 的 速度 。 


3. 智能 加 载 

根据 不 同 的 网 络 状况 选择 不 同 的 数据 加 载 ， 通 常用 在 3G/4G/Wi-Fi 可 切换 的 网 络 上 。 为 了 
既 让 用 户 使 用 流畅 ， 也 不 浪费 没 必 要 的 流量 ， 当 Wi-Fi 条 件 下 ， 会 优先 选择 高 清 视频 或 者 
高 质量 的 音乐 进行 播放 ; 当 4G 条 件 下 ， 有 些 下 载 和 更 新 的 内 容 会 被 终止 ; 而 在 网 络 不 通 
的 时 候 ， 视 频 质量 会 被 降 到 最 低 。 其 实 最 终 的 目的 就 是 为 了 保证 用 户 使 用 时 的 流畅 度 。 


4. 分 步 加 载 

当 界 面 中 图 文 同时 存在 时 ， 会 选择 优先 加 载 文字 ， 图 片 则 用 其 他 的 方式 占 位 ， 最 终 等 待 图 
片 加 载 完 成 。 分 步 加 载 的 好 处 是 在 等 待 加载 的 时 间 里 用 户 可 以 看 到 相关 的 文字 内 容 ， 不 会 
像 晶 屏 加 载 或 者 Toast 加 载 ， 用 户 只 能 默默 地 等 待 加 载 的 过 程 。 


画 重 点 
( 1 ) 加 载 的 定义 ， 用 户 在 客户 端的 界面 上 进行 操作 ， 客 户 端 发 送 请 求 到 服务 器 ， 服 务 器 
处 理 请 求 ， 返 回 数据 并 显示 给 用 户 。 这 一 过 程 称 之 为 加 载 。 


(2 ) 加 载 的 设计 样式 : 状态 栏 加 载 、 导 航 栏 加 载 、 下 拉 刷 新 加 载 、 上 拉 加 载 、 进 度 条 加 
载 Toast 加 载 、 日 屏 加 载 、 预 设 图 片 加 载 、 色 块 加 载 、 模 糊 加 载 。 


( 3 ) 加 载 方式 : 预 加 载 、 懒 加 载 、 智 能 加 载 、 分 步 加 载 。 


深入 了 解 加 载 的 样式 和 方式 后 ， 可 以 让 我 们 在 设计 和 交互 中 改善 那些 不 合理 的 加 载 ， 从 而 
提升 产品 的 舒适 度 ; 也 可 以 利用 加 载 来 做 更 多 的 设计 ， 让 加 载 变 得 更 有 趣味 性 ， 减 少 用 户 
因 等 待产 生 的 焦虑 感 。 
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03 金刚 区 


文 / 姜 正 


当 我 们 设计 首页 ， 考 虑 页 面 布局 细节 的 时 候 ， 可 能 最 让 人 头疼 就 是 金刚 区 的 图 标 设 计 。 在 
设计 金刚 区 的 时 候 ， 很 多 设计 师 往往 不 知道 采取 哪 种 样式 能 够 更 好 地 服务 产品 ， 面 对 这 个 
头疼 的 问题 ， 我 们 结合 实际 上 线 产 品 中 金刚 区 的 设计 进行 了 归纳 总 结 ， 分 析 它 们 的 设计 样 
式 以 及 优 缺 点 。 


金刚 区 的 定义 


金刚 区 是 指 页 面 顶部 banner 之 下 的 核心 功能 区 ， 它 会 根据 产品 业务 目标 的 变更 进行 调 
整 ， 就 像 百 变 金刚 一 样 灵 活 ， 所 以 叫 作 金刚 区 。 人 金刚 区 多 以 排列 的 形式 展现 图 标 ， 一 般 情 
况 一 屏 展 示 5~10 个 图 标 。 
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金刚 区 的 作用 


金刚 区 服务 于 整体 产品 ， 属 于 页 面 的 核心 功能 区 ， 其 主要 作用 有 两 点 : 一 是 业务 导 流 ， 为 
不 同 的 业务 模块 进行 引流 ; 二 是 功能 选择 ， 为 用 户 提供 不 同 功 能 的 服务 。 


金刚 区 的 设计 形式 和 优 缺 总 


金刚 区 的 设计 形式 一 般 是 由 “图 标 + 文 字 ” 组成。 我 们 以 线 上 实际 的 产品 为 例 ， 简 单 归 纳 
一 下 当前 主流 的 金刚 区 样式 。 


1. 面 性 图 标 


设计 样式 : 面 性 图 标 是 由 外 部 轮廓 和 内 部 图 形 组 成 ， 外 轮廓 的 图 形 一 般 选 用 圆 形 或 者 超 李 
圆 作为 背景 图 形 ， 色 彩 上 多 会 选用 同类 色 处 理 成 微 渐变 的 形式 。 


穴 和 快报 HOT “00 后 "平均 身高 出 炉 ，90 后 表 | 更 多 


阐 宝 头条 ER 所 请 的 潮 人 都 名 驶 不 了 这 个 品牌 ， 你 页 不 我 所 加 m6) 发 现 好 货 


ji 用 全 有 好 上 加 as 和 人 
By “" | , "3780 “13.9 Y69.9 直 思 


ke ce 日 A DD BB ©@ 车 A 


我 的 向 空 首页 分 类 


淘宝 京东 
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优点 : 外 轮廓 选用 了 圆 形 或 大 圆 角 的 图 形 ， 具 有 亲和力 ， 容 易 吸 引用 户 的 注意 力 ; 色彩 
饱满 具有 质感 ， 视 党 冲击 力 强 ; 内 部 图 形 与 外 轮廓 组 合 方式 多 样 化 ， 能 更 好 地 适应 业务 
变化 。 


缺点 : 对 于 相似 的 业务 ， 图 形 相 似 ， 视 觉 辨识 度 低 ; 对 于 复杂 的 业务 ， 图 形 无 法 明确 表 
达 ， 需 要 使 用 文字 代 蔡 图 形 ， 容 易 造成 金刚 区 设计 风格 不 统一 。 

2. 图 形 图 标 

设计 样式 : 独立 的 图 形 设 计 ， 不 需要 外 轮廓 的 衬托 。 


时 中国 联通 他 下 午 1:02 O173% 叶 旧 中 国联 通 他 下 午 4:30 G5 100% m+ 
v 输入 两 户 名 、 地 点 或 栗 品 。。。 © | 
北京 品 本 >! 局 保安 


a 人 Oa 六 


美食 电影 /演出 酒店 休闲 娱乐 外 将 


县 驱车 民 是 
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优点 : 设计 细节 丰富 ， 处 理 样 式 较 多 ， 例 如 渐变 、 图 案 纹理 等 ; 富有 创意 ， 能 营造 小 的 场 
景 插画 ; 设计 样式 多 样 ， 如 局 平 化 、2.5D 等 设计 样式 。 


缺点 : 对 文字 信息 的 依赖 性 强 ; 图 形 、 色 彩 等 细节 容易 设计 过 度 ， 造 成 复杂 的 图 形 和 过 度 
弥散 效果 。 


3. 线性 图 标 


设计 样式 : 主要 利用 图 形 的 结构 线 进行 设计 ， 色 彩 上 基本 以 纯色 为 主 ， 或 者 添加 品牌 色 作 
为 辅助 色 。 
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优点 : 设计 上 简洁 干练 ， 不 易 干 扰 用 户 进行 其 他 操作 。 


缺点 : 在 内 容 复杂 的 页 面 中 视 党 冲击 力 较 弱 ; 相 比 于 面 性 图 标 色彩 较为 单调 。 


4. 线 面 结合 
设计 样式 : 在 图 形 化 的 基础 上 添加 轮廓 结构 线 ， 色 彩 上 简练 干净 ， 一 般 不 会 超过 三 种 
颜色 。 
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优点 : 轮廓 清晰 ， 视 觉 冲 击 力 较 强 ; 设计 细节 丰富 ， 富 有 创意 。 


缺点 : 视觉 层级 烦琐 ， 效 果 不 易 把 握 ; 视觉 效果 复杂 ， 不 够 简洁 ; 图 形 不 统一 ， 增 加 识别 
难度 ， 较 为 依赖 文字 注释 。 


5. 实物 展示 
设计 样式 : 多 以 当前 主 营业 务 具 有 代表 性 的 商品 为 例 ， 单 独 展示 或 者 配合 遮 特 图 形 进行 


展示 。 


4 时 中国 联通 全 下 午 12:54 B75 30%m 1 村 中 国联 通 全 下 午 12:14 B75 94% mas 
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童装 童鞋 。 跟 儿 鞋 服 《玩具 童车 ” 母 野 用 品 ”办 儿 尿 裤 3.1 折 / & 


短 款 保暖 高 领 
HiDou 小 香 丝 绒 外 大 


只 :当当 化 肖 [NEW] 跟 看 绘本 学 数学 更 多 


今日 特 更 价 :107.65 ¥338 


会 到 @ TAI 


析 环 分 类 发 现 购物 车 我 的 


当当 小 红 书 
优点 . 主题 明确 ? 简单 直接 ; 使 用 商品 展示 9 具有 感染 力 O 


缺点 : 纯 商品 图 片 展示 ， 缺 乏 设 计 感 且 视 党 重量 不 易 把 控 和 统一 ; 商品 图 展示 ， 容 易 误导 
用 户 ， 让 用 户 感 党 只 是 单一 商品 的 售卖 ; 展示 立意 单一 ， 极 其 依赖 文字 注释 ; 如 果 频 查 更 
换 商品 图 ， 会 增加 用 户 对 于 金刚 区 模块 认 知 的 学 习 成 本 。 


6. 日 主题 
设计 样式 : 主要 以 当前 的 节日 文化 元 素 为 基础 进行 设计 ， 贴 合 节日 氛围 和 自身 的 品牌 
属性 。 


第 1 章 ”移动 端 组 件 的 认识 与 运用 


哎 刺 穆 贰 16 点 场 00:03:07 秒杀 好 货 交 新 年 全 


优点 : 设计 风格 节日 气氛 浓重 ， 满 足 用 户 当前 的 情感 需求 ; 设计 细节 精致 ， 富 有 创意 ; 视觉 冲 
击 力 强 ; 视 党 上 与 当前 运营 主题 设计 风格 统一 ， 合 整个 界面 在 视 党 上 看 起 来 更 加 融合 。 


缺点 : 贴近 节日 活动 主题 的 图 形 设 计较 为 复杂 ， 功 能 的 识别 性 较 弱 ; 由 于 图 形 设计 主要 以 党 
染 气 氛 为 主 ， 所 以 图 标 极其 依赖 文字 注释 ; 时 效 性 强 ， 只 针对 节日 活动 前 后 的 时 间 阶 段 。 


7. 混合 搭配 


设计 样式 : 主要 以 图 标 和 图 片 为 主 进 行 混合 排 布 ， 图 片 一 般 都 会 进行 图 形 席 党 处 理 ， 使 其 
与 其 他 图 标 在 视 党 上 相对 统一 。 
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优点 : 能 够 有 效 帮助 产品 推动 当前 的 运营 活动 点 击 率 。 
缺点 : 图 形 和 图 片 混搭 容易 造成 视觉 不 统一 ; 如 果 频 每 更 换 运营 活动 ， 增 加 了 用 户 的 学 习 
成 本 。 


8. 运 宫 文子 
设计 样式 :以 运营 文案 为 主 ， 结 合 当前 的 活动 进行 主题 性 的 视觉 创意 设计 。 


苏宁 “ 吃 西 红 柿 的 五 条 禁忌 看 完 慎重 着 ... G2 
性 生 揭秘 为 什么 人 会 不 自觉 地 样 腿 ? 和 至 


这 上 斑 9m5 距离 下 场 |02|:|29|:|35| 塘 玫 于 


会 贸 风物 车 我 的 易 购 


淘宝 苏宁 


优点 : 突出 当前 的 运营 活动 主题 ， 满 足 用 户 情感 化 的 设计 ; 运营 活动 的 针对 性 强 ， 能 够 直 
接 突 出 主题 ; 设计 风格 新 闫 ， 通 常 结合 当前 活动 主题 进行 创意 设计 ; 细节 丰富 ， 视 党 冲 击 
力 强 。 


缺点 : 品类 功能 的 辨识 度 极 低 ， 对 底部 的 文案 依赖 性 强 ; 时 效 性 强 ， 只 限 用 于 当前 活动 
期 昌 。 


如 何 选 择 金刚 区 的 样式 


主流 的 金刚 区 图 标 设 计 样 式 分 为 两 种 : 线性 图 标 和 面 性 图 标 。 
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线性 


图 标 


通过 归纳 总 结 ， 我 们 发 现 大 多 数 金 刚 区 的 属性 可 以 分 为 两 种 : 一 种 是 功能 性 的 金刚 区 ， 主 
要 以 展示 产品 的 核心 功能 为 主 ， 为 用 户 提 供 功 能 型 的 服务 ; 另 一 种 属于 业务 性 的 金刚 区 ， 
主要 以 为 各 个 业务 导 流 为 主 。 


在 设计 工作 当中 ， 可 以 根据 实际 的 需求 选择 使 用 哪 种 设计 样式 。 在 这 里 我 们 需要 参考 所 设 
计 的 金刚 区 的 功能 类 型 和 功能 数量 两 个 参考 维度 。 如 果 产 品 是 功能 性 的 且 数 量 偏 多 ， 建 议 
使 用 线性 图 标 ， 因 为 线性 图 标 视 党 上 更 加 安静 沉稳 ， 不 会 过 多 地 干扰 用 户 ， 使 页 面 更 加 统 
一 整体 。 例 如 支付 宝 首 页 的 金刚 区 的 功能 较 多 ， 选 用 线性 图 标 能 使 整个 模块 更 加 统一 ， 用 
户 可 以 根据 自己 的 需求 进行 点 击 。 


余 颌 室 。 。。” 芝 拼 信用 。。” 蜗 蚁 借 唆 琵 鹃 
俏 
充值 中 心 红包 运动 生活 缴费 
且 cb 的 36 
城市 服务 。 我 的 快速 共享 单车 更 


” 主人， 有 人 搂 你 的 鸡 ~ 16 小 时 前 
” 。 你 的 步 数 排行 榜 更 新 了 16 小 时 前 


你 有 绿色 能 量 待 领取 
蚂蚁 森 林 新 玩法 有 CEE 


惠 支 付 
签到 领 积 分 = 赚 钱 红 包 升 级 篇 、 
@ (的 图 卫 国 0 
百 页 4 辣 :| 事 习 


支付 宝 


如 果 是 业务 性 的 产品 则 更 加 适用 于 面 性 图 标 ， 因 为 面 性 图 标 视 党 冲击 力 强 ， 能 够 快速 引导 


zi 
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用 户 点 击 ， 完 成 业务 导 流 的 作用 。 常 见 的 使 用 场景 有 淘宝 、 京 东 等 电 商 平台 。 


人 @ 淘 抢 购 鲜 有 好 货 
咎 时 限量 抢 兴 人 给 挑剔 的 人 


2 、 
党 淘 请 息 购物 车 我 的 淘宝 


淘宝 、 京 东 等 电 商 平台 资源 品类 丰富 ， 金 刚 区 需要 担任 为 其 他 业务 导 流 的 作用 ， 选 择 视 沉 
冲击 力 较 强 的 面 形 图 标 能 够 更 好 地 吸引 用 户 的 注意 力 ， 引 导 用 户 点 击 选 择 。 


男 重 点 


(1) 金刚 区 是 页 面 的 核心 功能 区 ， 会 根据 产品 业务 目标 的 变更 进行 灵活 调整 。 


(2 ) 金刚 区 的 主要 作用 是 为 产品 的 主 营 业务 导 流 和 辅助 运营 ， 以 及 为 用 户 提供 核心 的 功 
能 服务 。 


( 3 ) 在 选用 金刚 区 设计 样式 的 时 候 ， 我 们 主要 参考 的 是 功能 类 型 和 功能 数量 两 个 维度 ， 
产品 偏重 功能 性 且 数 量 多 的 时 候 更 适用 线性 图 标 ， 产 品 偏重 业务 性 的 话 更 适用 面 性 图 标 。 


由 


考 资 料 
金刚 区 ， 瓷 片区 的 叫 法 是 怎么 来 的 ? https://dwz.cn/kYrJejYF 
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04 表 早 


文 / 付 铂 珊 


用 App 时 每 次 遇 到 填写 表单 都 会 是 一 件 头疼 的 事情 ， 所 以 作为 设计 师 ， 每 次 设计 表单 界面 
时 也 不 可 以 忽略 它 的 重要 性 。 通 过 了 解 表 单 的 基本 组 件 样式 和 使 用 场景 ， 将 其 运用 到 设计 
当中 ， 在 不 同 的 情境 下 使 用 最 合理 的 组 件 来 搭建 表单 ， 可 以 让 表单 填写 变 得 更 轻松 。 


表单 中 的 内 容 有 很 多 ， 例 如 复 选 框 、 单 选 框 、 输 入 框 、 下 拉 选 择 、 开 关 、 分 段 控件 等 元 
素 。 表 单 对 于 用 户 而 言 是 数据 的 录入 和 提交 界面 ; 对 于 网 站 而 言 是 获取 用 户 信 息 的 途径 。 
表单 可 以 帮助 我 们 通过 采集 更 多 的 用 户 信息 来 给 用 户 提供 更 贴心 的 服务 。 


移动 蜥 表单 中 的 基本 组 件 及 使 用 场景 


正确 设计 表单 的 前 提 则 是 了 解 表 单 中 常用 的 组 件 以 及 它们 的 特性 ， 以 及 在 不 同 场 景 下 如 何 
选择 表单 组 件 。 这 里 再 次 强调 下 ， 下 文 的 组 件 讲 的 都 是 在 表单 中 的 运用 。 


1. 输入 框 


这 是 接受 用 户主 动 输入 文本 的 区 域 ， 当 用 户主 动 点 击 输入 区 域 时 ， 会 唤起 键盘 。 输 入 完 
毕 后 ， 点 击 键 盘 的 确认 键 ， 应 用 会 自动 根据 输入 的 信息 显示 对 应 的 内 容 ， 如 下 图 所 示 : 
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当然 ， 相 比 那 些 只 需要 点 击 或 者 滑动 的 组 件 来 说 ， 输 入 框 对 用 户 来 说 操作 成 本 较 高 ， 所 以 
我 们 在 选择 用 输入 框 时 ， 应 该 考虑 是 否 还 有 其 他 方式 能 减少 用 户 的 操作 成 本 ， 例 如 下 拉 菜 
单 ， 可 以 直接 选择 其 中 的 内 容 。 


无 服务 从 下 午 4:08 100% mm 无 服务 全 下 午 4:08 100% mw 


个 QQ 个 QQ 


e 0418358 v 104183589  。 
和 人 S1798222 
S 2707 
S, 104183 
忘记 密码 用 户 注册 忘记 密码 用 户 注册 
茹 巡 即 代表 闻 订 并 同时 服务 条 款 登录 即 代表 人 阅读 并 同 重 服 务 条 款 


QQ 下 拉 选 择 


2. 分 段 控件 
分 段 控件 来 源 于 iOS 规 范 ， 通 常 在 单 选项 为 2 ~ 5 个 的 场景 下 使 用 ， 如 下 图 所 示 : 


网 易 有 钱 汰 鱼 记 账 
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在 界面 中 分 段 控 件 起 到 分 割 和 筛选 同类 数据 的 作用 。 另 外 ， 它 可 以 把 所 有 的 选项 都 呈现 给 
用 户 ， 用 户 可 以 快速 地 做 出 选择 。 交 互 部 分 需要 注意 的 是 ， 分 段 控 件 只 能 通过 点 击 控件 本 
身 的 分 段 来 进行 操作 ， 不 可 横 滑 切 换 。 


3. 状态 切换 器 


状态 切换 器 又 称 开关 ， 是 仿照 真实 的 开关 理念 而 设计 的 。 选 择 开关 的 前 提 是 需要 两 种 简单 
且 直 接 对 立 的 选项 。 例 如 开 和 天 ， 显示 和 隐藏 ， 如 下 图 所 示 : 


需要 发 票 


您 可 在 入 住 放 成 10 天 内 补 全 导 息 
个 号 码 保护 @ 
对 商家、 鸡 手 幅 臣 您 的 真 交手 机 号 ， 保 护 您 的 隐私 


@&) 


美 团 外 卖 小 猪 短 租 


使 用 状态 切换 器 的 项 目 通常 重要 性 相对 较 低 ， 都 是 附加 功能 ， 不 会 影响 表单 的 提交 流程 。 


4. 滑动 控制 器 
当 表单 中 存在 选择 一 个 值 或 一 个 范围 时 ， 可 以 舍弃 复杂 的 下 拉 菜 单 或 者 系统 默认 的 选择 控 
件 改 用 滑动 控制 器 。 既 减少 用 户 的 操作 ， 又 增加 界面 的 设计 感 ， 如 下 图 所 示 : 


需求 履 时 额度 56.183.00 


43,001,00 
选择 有 效 期 


掌上 生活 民生 信用 卡 


内 。 
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滑动 控制 器 在 表单 中 多 用 于 调整 额度 ， 相 对 输入 和 步 进 器 来 说 更 加 方便 ， 但 占据 界面 中 的 
空间 比较 大 。 当 然 其 他 产品 中 也 有 用 到 滑动 控制 器 的 ， 不 过 都 不 是 企 表单 中 的 运用 ， 这 里 
器 不 一 一 列举 了 。 


5. 数字 步 进 器 

可 以 被 用 在 只 能 递增 /递减 其 数量 的 选项 上 ， 以 便 让 用 户 能 快捷 地 微调 数值 。 使 用 步 进 
设计 代 蔡 下 拉 列 表 ， 既 可 以 降低 操作 失误 率 ， 也 能 在 一 定 程度 上 减少 点 击 次 数 ， 如 下 
图 所 示 : 


*###0 跨国 移动 邻 上 午 1:54 


进口 香蕉 【 精 】 500g 


和。 内. 日 龙 观 二 | 
© 
i890 一 3 十 


下 50 元 ,再 买 40 元 可 碱 50 元 
吗 差 52 30 元 ， 运 必 立 减 6.00 元 法 羯 单 
| 1 号 口 伐 从 清空 爸 物 车 
P= . 
合计 : Y26.70 
| i Es Et - 办 


西红柿 鸡蛋 差 饭 Y72 -4®O 


多 点 美 团 外 卖 
步 进 器 芷 产品 中 经 党 出 现在 购物 列表 中 ， 相 比 单 纯 的 选择 数字 和 输入 数字 ， 这 种 方式 允许 
用 户 遇 到 大 数额 时 可 以 手动 输入 ， 遇 到 小 数额 变化 时 又 可 以 通过 点 击 逐 步 增 减 。 


如 何 提升 用 尸 信息 录入 效率 


1. 防止 输入 框 的 遮挡 


错误 示例 : 如 图 ， 当 我 们 要 输入 最 下 面 “ 杀 友 公 司 名 称 时， 键盘 被 唤醒 ， 同 时 遮挡 了 所 
有 需要 填写 的 表单 组 件 ， 和 需要 滑动 底层 界面 才能 继续 填写 。 这 种 体验 是 十 分 糟糕 的 。 


正确 示例 : 在 用 户 输入 完 当 前 表单 的 有 某 一 段落 时 ， 底 层 界面 位 置 应 该 自动 往 上 移动 ， 显 示 


当前 该 填写 


9205 中 国 凌 动 他 F253 + 
< 推荐 办 卡 


[ 惟 2 人 及 以 上 】10 元 物 凤 ELLE20 寸 柱 生 和 祖 + 观 商 包 想 
全 14000 积 分 【2 盐 1 

【 接 4 人 及 以 上 ] 10 元 拉 构 观 立 人 电网 卫 + 铺 固 件 村 /要 
也 斯 石 地 机 /0000 积 分 〈3 进 1 

| 扒 8A RM 107 亏 抢 欧 飞 利 清 电 视 NIYO 于 机 


去 re 可 得 实 悔 礼品 数 生 有 
分 礼 柄 入 入 明寺 册 活 于 如- 
且 亲 导入 和 上 组 不 柯 与 其 地 按理 办 上 运动 


查看 详情 
看 看 可 推荐 读 wp8 划 有 
亲友 手机 PTT 
凤 开 慰 名 
录 友 红 而 Y 
亲友 登 别 男 ~ 
训 碟 公司 世 称 


2. 实时 校 验 
错误 示例 |: 


e00000 让 国际 前 衬 Fy254 .0 
< 推荐 办 卡 
【 玲 2 人 及 以 上 】10 无 人 本 ELLE20 可 下 订 攻 + 双肩 避 相 
会 J40G 0 本 分 2 这 1) 


工作 4 人 瑟 以 上 ] rr 器 网 性 要 | 到 
6000 

【6 人 玉 以 上 】 0 区 夫 沟 尺 种 汪 电 顺 /MNO 于 机 / 
ET 


特别 竺 示 : FE 本 融 ， 买 和 礼品 区 共有 
隘 ， 积 分 类 ,本 达 邮 及 7 
县 本 活 过 所 措 不 辐 与 愉 人 推荐 办 上 动 黑 计 。 


全 看 谋 博 


看 看 可 排 艾 济 vipja# 太 二 
夫 友 手机 PR6f493019 
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人 zilxicivibinim 加 
国 回 "| :> 用 


掌上 生活 
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项 目的 完整 输入 框 ， 确 保 表 单 在 填写 时 无 任何 元 素 的 遮挡 ， 方 便 用 户 的 输入 。 


89502509 市 国 闫 加 字 下 F300 DE 
< 推荐 办 卡 
着 看 可 推荐 谁 VIP 招募 有 好 筷 
亲友 手机 BIBBS482919 
豪 友 性 各 | 
豪 友 城 币 
训 友 性 别 喝 v 
谊 友人 公司 名 称 


我 你 豆 壮 天 独 京东 在 ;人 


qiwieiritiyiuiiiolp 


个 zixiclivibinim a 
国 国 := Pl 


需要 用 户 填 完 所 有 信息 提交 时 ， 才 反馈 存在 很 多 错误 ， 用 户 需要 根据 系统 所 给 


出 的 提示 再 次 修改 提交 ， 影 响 用 户 体验 。 


系统 根据 用 户 输入 的 信息 进行 判断 并 及 时 告知 用 
系列 有 天 的 输入 。 如 此 融会 减少 用 户 的 


正确 示例 : 每 当 用 户 离 开 当 前 输入 项 时 ， 
户 输入 的 正确 性 ， 甚 至 还 能 引导 用 户 进行 接 下 来 一 
反复 操作 ， 表 单 也 会 变 得 更 容易 让 用 户 接受 


206 中 国 厌 动 人 下 二 301 e3000 厅 国 民 前 琉 下 9 1 coo 市 国 划 加 轨 下 二 301 了 
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qwertyiu io ip 


人 


33 


34 


Ul 那 些 事 儿 : 新 手 设计 师 的 成 长 之 路 


3. 键盘 匹配 


在 表单 中 通常 会 出 现 不 同 的 输入 需求 ， 有 需要 输入 文字 的 ， 有 需要 输入 英文 的 ， 有 需要 输 
入 数字 的 ， 届 时 我 们 应 该 为 不 同 的 输入 需求 匹配 不 同样 式 的 键盘 ， 减 少 用 户 的 切换 操作 ， 
提高 用 户 的 输入 体验 。 例 如 ， 输 入 电话 号 码 时 就 可 以 只 存在 数字 键盘 ; 而 输入 邮箱 时 不 
需要 拼音 ， 键 盘 就 只 保留 英文 和 数字 即 可 。 


手机 号 : 。 1860422111| 


90909090000D 
zlxlclvlblnIm 
0 a 


4. 智能 预 设 


错误 示例 : 表单 中 的 信息 每 次 都 需要 重新 填写 ， 填 写 表 单 本 身 对 用 户 来 说 就 是 一 件 很 头痛 
的 事情 ， 这 样 不 仅 增加 了 用 户 的 操作 ， 出 错 率 也 会 相对 提升 。 


正确 示例 : 每 日 优 鲜 中 第 一 次 添加 收 货 地 址 时 ， 由 于 产品 不 了 解 用 户 的 个 人 信息 ， 所 以 
所 有 项 目 都 需要 目 己 手动 完成 。 但 当 我 们 再 次 添加 地 址 时 ， 产 品 会 目 动 默认 填充 收 货 
人 、 手 机 号 码 、 城 市 等 之 前 的 信息 ， 这 就 减少 了 用 户 的 填 表 时 间 。 


第 1 章 ”移动 端 组 件 的 认识 与 运用 


seee ”中国 烷 动 令 上 者 下 ES4 + eeee 中 国 槐 说 写 上 秆 下 54 + eeee 中 国 椒 动 令 上 等 154 + 
《 我 的 收 货 地 址 《 我 的 收 货 地 址 《 我 的 收 货 地 址 

否 赁 人 四 收 货 人 付 先 生 
Ee +] 
表 讯 检 讨 栈 

手机 号 多 手机 号 机 604 

所 在 城市 村 | 岳 在 轿 市 ”北京 北京 市 

政信 好 域 殉 货 地 址 

到 楼 号 门牌 糯 号 门牌 
地 址 类 型 地 址 党 型 


每 日 优 鲜 


EE 


( 1 ) 表单 的 基本 组 件 : 表单 中 的 内 容 有 很 多 ， 例 如 复 选 框 、 单 选 框 、 输 入 框 、 下 拉 选 
择 、 开 关 、 分 段 控件 等 等 ， 本 文 主要 分 析 了 输入 框 、 分 段 控件 、 状 态 切 换 器 、 滑 动 控 制 
器 、 数 字 步 进 器 。 


(2 ) 提升 录入 效率 的 方法 : 防止 输入 框 遮挡 、 实 时 校 验 、 键 盘 匹 配 、 智 能 预 设 。 


通过 明确 表单 中 组 件 的 功能 以 及 在 不 同 场 景 的 使 用 ， 可 以 让 表单 的 设计 变 得 清晰 易 懂 ， 提 
高 用 户 的 填写 率 。 同 时 我 们 应 该 思考 如 何 优化 用 尸 在 使 用 时 的 交互 效果 ， 避 人 免 造成 反复 的 
操作 。 


参考 资料 
App 设 计 必 修 课 : 如 何 设 计 出 规范 的 移动 表单 组 件 http://t.cn/Eq1AeNN 


移动 端 下 拉 表 单 的 更 好 选择 http://t.cm/RKIWZ8s 
干货 ! 移动 端 表单 最 佳 实践 ”http://t.cn/Eh6EBOL 


如 何 设计 选择 菜单 ”http://t.cn/R5jpjS6 
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表单 中 的 勾 选 框 和 开关 http://t.cn/RtvoZdb 
小 功能 、 大 细节 | 天 于 选择 菜单 的 套路 ”http://t.cn/RDUU8QY 
移动 端 表单 设计 小 妙招 http://t.cn/EfiiOTd 


这 个 控件 叫 : Segment Control/ 分 段 控件 ( 附录 与 Tabs 的 区 别 ) 


http://t.cn/Efii1PR 


第 1 章 ”移动 端 组 件 的 认识 与 运用 SF 


05 评论 区 


互联 网 让 大 家 可 以 在 虚拟 的 世界 里 畅所欲言 ， 而 每 个 产品 的 评论 区 就 成 了 大 家 发 表 看 法 的 
单 用 场所 ， 在 满足 一 部 分 用 户 的 此 言 欲 望 的 同时 ， 也 满足 了 劳 观 群众 的 好 奇 心 ， 默 默 “ 洪 
水 ”也 能 了 解 一 个 江湖 。 网 易 云 音乐 能 火 起 来 的 重要 原因 之 一 ， 就 是 它 走 心 的 评论 ; 视频 
网 站 的 弹 幕 文化 ， 也 都 是 基于 这 一 原因 而 出 现 的 。 


但 是 ， 作 为 一 个 有 产品 思维 的 设计 师 ， 我 们 不 能 只 看 到 这 些 表面 的 东西 ， 需 要 去 分 析 一 下 
它们 背后 的 钦 辑 ， 知 遵 它们 有 哪些 不 同 之 处 ， 又 是 基于 什么 原因 而 做 得 不 一 样 。 


评论 区 样式 


1. 回复 别人 上 时， 内容 下 方 之 上 原 帖 内 容 


如 下 图 网 易 云 音乐 ， 当 你 回复 别人 的 时 候 ， 在 你 的 帖子 下 方 会 这 上 原 帖 ， 也 就 是 你 回复 的 
那个 人 友 的 文字 。 


pe 相 子 的 相 子 520 


是 的 


@ 你 的 虎牙 030: 首尔 下 雪 了 啊 . 听 看 这 歌 好 像 又 
回 到 了 2012 年 . 那 时 候 大 家 都 还 在 那 时 候 exo 也 
刚 出 道 .., 一 切 都 还 像 在 昨天 ... 珍 惜 当下 吧 ! 


网 易 云 音乐 


( 1) 能 让 人 一 眼 就 看 到 回复 的 是 哪 条 帖子 ， 信 息 层 级 明显 、 容 易 区 分 ; 


(2 ) 活跃 了 评论 区 的 氛围 ， 每 一 条 回复 都 会 新 增 一 条 评论 动态 ，10 个 人 回复 就 会 有 11 条 
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动态 ( 原 帖 本 身 +10 条 回复 内 容 ) ， 给 人 一 种 很 多 人 在 用 的 感觉 ， 适 合 产 品 早期 用 户 体 量 
小 的 时 候 。 


( 1 ) 当 回 复 信息 较 多 时 ， 看 不 懂 谁 回复 谁 ， 在 你 来 我 往 的 对 话 中 ， 每 次 只 附带 一 条 原 帖 
内 容 ， 在 外 人 看 来 没有 上 前因后果 ， 让 人 摸 不 着 头脑 ， 对 话 感 不 强 ; 


( 2 ) 不 适合 市 图 片 的 评论 ， 如 果 每 一 条 回复 下 方 都 会 这 上 原 帖 的 图 片 ， 图 片 所 占 位 置 太 
大 ， 一 屏 内 显示 不 了 几 条 评论 。 而 且 当 多 人 回复 同一 条 评论 的 时 候 ， 图 片 重复 次 数 多 。 


2. 回复 别人 时 ， 回 复 内 容 在 原文 的 下 方 


社交 类 、 服 务 类 的 产品 较 常 使 用 这 种 方式 ， 即 回复 别人 的 帖子 ， 回 复 内 容 在 原文 的 下 方 。 
例如 视频 网 站 、 微 博 这 一 类 产品 用 尸体 量 较 大 ， 回 复 同 一 条 帖子 的 几率 较 大 , 每 一 条 回复 
都 带 上 原 帖 ， 显 然 不 合理 。 试 想 一 下 ， 你 和 100 个 人 针对 同一 条 内 容 进行 回复 ， 你 一 定 是 
想 第 一 时 间 看 到 所 有 其 他 人 怎么 回复 的 ， 而 不 是 100 条 市 上 原 帖 的 回复 。 


当 同 一 条 内 容 评论 人 数 过 多 ， 没 有 空间 展示 所 有 的 回复 内 容 ， 可 以 只 展示 几 条 回复 内 容 ， 
再 用 其 他 的 方式 如 “查看 全 部 121 条 回复 ”的 链接 ， 让 用 户 知 道 还 有 其 他 的 评论 ， 诱 导 他 
们 点 击 进入 下 一 页 查看 所 有 评论 。 


@ 贝 旭 家 的 小 贡 女 四) 


图 你 们 喜欢 哪 一 期 的 主人 公 ? 


cg @) 122 9 124 
查看 全 部 121 条 局 自 ， C3 me248oz27iekvp a 内 
123 
@ mastans :sr 由 
杨 骨 
@ “2 2 四 1 


3 少 添加 评论 ,， 
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优点 

( 1 ) 用 户 之 间 互 动 强 ， 就 像 在 现实 生活 中 小 组 讨论 一 样 ， 大 家 都 争 对 同一 个 主题 ， 发 表 
自己 的 言论 ， 市 入 感 强 ; 

(2 ) 信息 层级 明确 ， 针 对 同一 条 内 容 的 回复 都 在 一 个 页 面 同一 个 层级 内 。 


缺点 
( 1 ) 需要 点 击 跳 转 到 新 的 页 面 ， 才 能 看 到 针对 这 条 评论 的 所 有 回复 ,流程 了 多 了 一 步 ; 
(2 ) 每 条 评论 都 展示 几 条 回复 的 话 ， 占 据 了 太 多 的 屏幕 空间 。 


3. 只 展示 评论 数量 ， 回 复 需 要 点 击 进 入 详情 页 


现在 很 多 App 都 开始 用 这 种 方式 ， 只 在 外 面 展 示 回 复 、 点 赞 、 转 友 的 数量 ， 想 要 回复 
或 者 查看 其 他 人 回复 的 内 容 的 时 候 ， 需 要 扣 击 跳 转 到 评论 详情 页 。 这 就 相当 于 我 们 去 一 
个 陌生 的 地 方 逛 一 样 ， 都 是 自己 不 知道 的 店铺 ， 那 我 们 只 能 通过 店 里 的 人 流量 〈 点 赞 
数 ) 、 大 家 的 推荐 指数 〈 转 有 友 数 ) 、 店 铺 装修 风格 ( 触动 人 的 文案 或 图 片 ) 等 ， 来 选择 
进入 哪 家 店铺 。 


无 SIM 卡 念 21:50 * 81% 国 本 ) 
818 体 育 -和 rr > 站 
< 各 St | 关注 
加 油 。 岛 
41 分 钟 前 ， 回复 


© 九 牧 人 氏 


欧美 的 足球 是 文化 ， 我 们 的 足球 是 运动 
1 小 时 前 ”4 回复 


四 发 表 评 论 del 抉 摇 事 


glIng76585814 
据说 世界 杯 开 募 ， 那 个 歌手 竖 中 指 就 已 

角 ) 天 空中 的 浮云 , 经 预测 了 决赛 是 法 国 和 克罗地亚 ， 法 克 

em (FUCK) 

说 的 我 都 要 器 了 ， 你 们 俩 真 的 就 不 能 不 那么 掠 吗 ? 真 29 分 钟 前 ， 2 复 

是 要 了 我 们 这 些 没 能 和 心中 的 他 在 一 起 的 靓 嫂 们 美 瞎 

眼睛 吗 ? 好 伤心 阿 ! 靖 合 使 售 全 人 麻将 52190583 人 
中 国 队 要 是 能 进 决赛 ， 全 国人 一 人 给 国 


家 队 队 员 发 一 块 钱 奖金 都 行 
52 分 钟 前 * ”13 回复 
- 用 户 5738067246 0 
普京 : 小 梅 ， 对 不 起 ， 我 请 的 人 ， 你 坐 
着 也 要 陪 完 。 
由 19 中 571 人 写 评论 .. PN 


芒果 TV 今日 头条 
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优点 
( 1) 节省 了 页 面 空间 ， 同 样 大 小 的 区 域 能 够 展示 更 多 的 内 容 ; 


( 2 ) 给 用 户 选 择 的 余地 ， 他 只 需要 点 自己 感 兴趣 的 内 容 去 回复 ， 同 时 和 所 有 对 这 条 评论 
感 兴趣 的 人 一 起 沟通 交流 ， 而 不 是 置身 于 一 个 大 杂烩 的 场景 之 中 。 


缺点 
( 1 ) 操作 比较 复杂 ， 需 要 点 击 进入 新 的 页 面 ， 多 了 一 步 页面 操 作 ， 且 引导 性 不 够 ; 


( 2 ) 当 单 条 评论 不 够 有 吸引 力 的 时 候 ， 用 户 没有 点 击 欲望 ， 长 此 以 往 ， 每 条 评论 的 回复 
太 少 ， 会 打击 用 户 的 积极 性 ， 后 续 可 能 就 不 想 参 与 了 。 


4. 特定 情况 才能 评论 

以 淘宝 为 例 ， 用 户 购 买 之 后 才 有 评价 的 资格 ， 否 则 只 能 回复 别人 的 评论 。 买 过 才 有 发 言 权 ， 
这 能 在 一 定 程 度 上 维持 评论 区 的 和 谐 ， 不 至 于 出 现 一 片 倒 的 水 军 。 针 对 一 些 恶 意 差 评 ， 商 家 
的 回复 信息 可 以 直接 显示 在 下 方 ， 信 息 展示 明确 ， 在 一 定 程度 上 能 绥 解 用 户 的 反感 。 


[0 
2018-07-06 颜色 分 类 : 透 润 肌 底 绿 茶 籽 精华 特别 套装 


超 奶 思 ， 没 想到 这 套 水 乳 太 好 吸收 了 吧 ! 不 油 用 ， 
特 水 润 ， 抹 开 一 下 就 吸收 了 ， 改 善 水 油 不 平衡 好 像 
真 的 有 效果 。 之 前 一 直 听 盆 友 安利 ， 没 想到 效果 真 
的 这 么 赞 | 


掌柜 回复 : 为 了 寻 你 ， 我 错过 了 许 许 许多 多 的 良辰 美 
景 ， 错 过 了 闲 看 花 开花 落 的 心情 ， 可 我 不 后 悔 ， 因 为 
你 是 innisfree 今 生 最 美的 遇见 ， 寻 得 你 ， 我 就 拥有 了 
全 世界 的 花 开颜 色 。 你 的 到 来 ， 为 我 拂 去 了 浪迹 天 涯 
的 孤独 ， 我 漂泊 的 灵魂 再 也 不 用 畏 转 流连 于 亭 台 楼 榭 
之 间 ， 湄 湄 云 水 之 上 。------------------- 购买 正品 
悦 诗风 吟 ， 请 认 准 【innisfree 官 方 旗舰 店 】 


浏览 1 次 [3 评论 手 点 赞 


评论 的 排 厚 万 陈 


评论 的 排序 方式 也 有 很 多 种 ， 目 前 最 主流 的 排序 方式 就 是 按照 评论 、 点 赞 的 数量 依次 排 
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序 ， 或 者 是 按照 时 | 介 ， 最 早 回复 的 在 下 面 ， 最 晚 回复 的 在 最 上 面 。 


1. 按照 点 赞 数 多 少 排序 


按照 点 赞 数 的 多 少 排序 ， 当 和 点 赞 数 一 样 的 时 候 ， 按 时 间 倒 序 排列 。 
S . 加 二 册 


@ 
an "2 


= 所 有 好 的 东西 都 是 需要 等 待 的 。 欲 望 是 
填 不 满 的 ， 急 着 想 要 拥有 的 最 后 就 还 是 
像 泡 沫 。 事 实 是 当 自己 一 步 一 步 就 像 走 
阶梯 一 样 ， 努 力 的 积累 了 一 点 又 … 全 文 


“多 腰 肌 劳损 换 来 的 六 we 
巴菲特 的 增长 表 让 人 惊讶 


|; 


CQ srx 


® 不 管 长 期 主义 还 是 短期 主义 ， 有 了 清晰 
缘分 这 事 ， 能 不 负 对 方 就 好 ， 想 不 负 此 的 认 知 这 个 前 提 都 能 发 财 ! 不 同 的 是 ， 
i 长 期 主义 有 了 清晰 的 认 知 很 有 可 能 会 发 
ied 6 更 大 的 财 ! 


© 缘分 这 种 东西 能 不 负 对 方 就 好 


清晰 的 认 知 太 难 了 也 许 不 之 坚持 的 人 
但 是 方向 错 了 终归 是 南 转 北 轩 


这 样 的 话 能 优先 看 到 热门 的 评论 ， 看 到 别人 都 在 说 什么 。 而 且 一 旦 上 自己 的 评论 被 人 扣 赞 上 
了 排行 榜 前 几 名 ， 能 给 用 尸 市 来 极 大 的 成 就 感 ， 激 励 看 他 继续 使 用 这 个 产品 。 


会 被 掩盖 企 热 门 评论 下 ， 很 难 找到 目 己 评论 的 内 容 ， 会 让 用 户 以 为 操作 没有 成 功 。 


2. 按照 评论 时 间 正 序 排列 
这 种 方式 比较 符合 正常 人 的 思维 逻辑 以 及 视觉 流程 ， 从 上 到 下 ， 先 来 的 先 显示 ， 后 来 的 后 
显示 。 但 是 却 不 太 适合 移动 端的 体验 ， 当 用 户 一 打开 最 先 看 到 的 是 时 间 最 久 的 评论 时 ， 会 
觉得 这 个 App 信息 更 新 得 太 不 及 时 ， 跟 不 上 潮流 。 而 且 一 些 优质 的 评论 会 因为 发 布 时 间 
晚 排 在 很 下 面 ， 从 而 被 用 户 忽 视 。 


41 


42 UlI 那 些 事 儿 : 新 手 设计 师 的 成 长 之 路 


周三 02:34 : 查看 回复 


周三 07:49 , 查看 回复 


3. 按照 评论 时 间 倒 序 排列 


这 种 方式 下 ， 用 户 自 己 回复 的 内 容 立 马 就 能 看 得 到 ， 操 作 有 反馈 ,体验 较 好 ， 但 相应 的 优 
质 评论 容易 被 时 间 淹 没 。 


25 分 钟 前 - 回 掉 
25 分 钟 前 * 回复 
24 分 钟 前 * 回复 


20 分 钟 前 * 回复 


-10 分钟 前 回复 


今日 头条 


这 几 种 排序 方式 还 可 以 组 合 起 来 使 用 ， 例 如 网 易 云 音 乐 就 结合 了 点 赞 数 和 时 间 倒 序 这 两 种 
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方式 ， 人 在 最 上 方 显示 十 几 条 精彩 评论 ， 按 点 赞 数 排序 ; 下方 按 照 时 间 倒 序 排序 ， 在 一 定 程 
度 上 满足 了 用 户 既 想 看 到 热门 的 评论 内 容 ， 又 想 实 时 看 到 自己 发 布 的 内 容 的 心理 。 


精彩 评论 
韩语 版 中 文 版 都 很 好 听 勒 佑 人 @ 


人 大 锅 粥 好 喝 同 专 218 号 


这 种 调调 只 要 歌词 不 是 那 种 口水 的 其 实 都 很 好 听 


全 部 精彩 评论 
伍 新 评论 (2010) 
今 栓 子 的 栓 子 520 
是 的 
@ 你 的 虎牙 030: 首尔 下 雪 了 啊 . 听 着 这 歌 好 像 又 


回 到 了 2012 年 . 那 时 候 大 家 都 还 在 那 时 候 exo 也 
刚 出 道 … 一 切 都 还 像 在 昨天 … 珍 异 当 下 吧 | 


网 易 云 音乐 


不 过 这 种 方式 仍 有 弊 妆 ， 热 门 评论 较 多 ， 十 几 条 评论 需要 划 过 好 几 屏 ， 对 我 这 种 很 少 听 歌 
的 用 户 来 说 ， 听 到 好 歌 难 得 去 评论 一 下 ， 结 果 半 天 没 找 到 目 己 的 评论 在 哪里 。 试 了 好 几 
次 ， 划 了 好 几 屏 才 看 到 自己 的 回复 内 容 安静 地 躺 在 最 新 评论 里 。 


微 博 则 单独 进行 了 分 类 ， 用 户 可 以 根据 上 自己 需要 选择 评论 排列 方式 ， 默 认 是 按 热 度 ， 也 就 
是 点 赞 数 。 


中 川 中 国 移动 令 21:28 7B$72%)s 
《首页 个 氏 三 | + 关注 | 。。 
你 看 到 了 时 间 的 脚步 吗 ? 

上 海 戏剧 学 院 表演 系 01 班 


前 来 报到 
@ 青 春 同学 会 班 委 会 


反正 明 早 都 是 肿 全 
pp 本 未 源 于 韩 雪 按 热度 


按时 间 
转发 2378 评论 1611 
于 按 热 度 
何 佟 欣 
看 到 了 胡 驳 优 
巴 转发 加 评论 内 鞠 


微 博 
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辆 重点 


当 你 的 产品 评论 时 效 性 较 强 的 上 时候， 评论 排序 方式 可 以 选择 时 间 倒 序 ， 最 新 的 评论 显示 在 
最 上 方 。 如 视频 类 App ， 回 复 内 容 大 多 类 似 ， 所 以 按照 时 间 来 排序 最 好 不 过 了 ; 当 你 的 
产品 是 希望 用 内 容 来 吸引 用 户 ， 那 你 可 以 选择 按 点 赞 数 排序 ， 点 赞 最 多 的 显示 在 最 上 方 ， 
如 新 闻 类 App。 


至 于 回复 别人 评论 的 时 候 怎 么 显示 ， 可 以 根据 上 自己 产品 的 调 性 而 定 ， 当 前 期 产品 活跃 度 不 
够 ,评论 较 少 的 时 候 ， 可 以 采取 每 条 回复 都 党 上 原 帖 ， 这 样 会 显得 评论 区 的 内 容 多 ， 氛 围 
活跃 一 些 ; 当 产 品评 论 数量 多 的 上 时候， 可 以 把 针对 一 条 评论 的 所 有 回复 内 容 放 置 到 一 个 新 
的 页 面 ， 这 样 用 户 企 看 别人 的 评论 以 及 回复 的 时 候 有 针对 性 ， 也 有 前 因 后 果 ， 能 够 知道 谁 
回复 了 谁 ， 谁 又 评论 了 谁 。 
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06 提示 框 


文 / 吴 萌 


在 日 常 工作 中 我 们 经 常会 看 到 各 种 类 型 的 提示 框 ， 在 官方 的 规范 里 ， 它 们 都 有 各 上 自 的 叫 法 
以 及 用 法 ， 什 么 场景 下 用 什么 样 的 提示 框 ， 也 早已 有 了 定义 。 只 是 有 些 提示 框 类 型 极其 相 
似 ， 难 免 有 人 会 在 工作 中 将 其 归 错 类 别 。 


提示 框 的 作用 


在 细 分 提示 框 的 种 类 之 前 ， 先 说 一 下 它 的 作用 。 提 示 框 作为 界面 中 一 个 必 不 可 少 的 组 件 ， 
有 它 存 在 的 独特 的 蕊 义 ， 主 要 的 作用 有 三 个 : 


1. 提醒 用 户 


企 用 户 操作 时 给 予 提 醒 ， 特 别 是 一 些 操作 会 影响 到 用 户 利益 的 时 候 ， 通 过 提示 框 去 提醒 他 
们 做 二 次 确认 ， 减 少 因为 误 操 作 而 市 来 的 损失 。 


2. 选择 权 


用 户 进行 重要 的 操作 ， 例 如 删除 所 有 订单 且 删 除 后 不 可 复原 时 ， 通 过 提示 框 把 选择 权 给 用 
户 上 自己， 让 他 们 目 己 决定 当前 的 操作 是 否 进行 下 去 。 


3. 知情 权 
告知 用 户 当前 所 发 生 的 事情 ， 让 他 们 对 当前 状态 有 一 个 预 估 ， 让 用 户 有 知情 权 。 
提示 框 的 种 类 


按照 不 同 的 维度 划分 的 话 ， 提 示 框 的 种 类 特别 多 。 本 文 以 最 简单 的 维度 一 一 模 态 和 非 模 态 
进行 划分 。 模 态 框 指 的 是 当 它 出 现 的 时 候 ， 用 户 必须 对 其 进行 操作 〈 确定 或 者 取消 ) ， 才 
能 关闭 它 ， 进 行 下 一 步 。 而 非 模 态 框 则 指 的 是 不 需要 用 尸 进行 操作 ， 它 上 自己 会 在 设 定 的 时 
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间 内 上 自动 消失 ， 用 户 只 能 等 待 它 上 自己 默默 消失 。 


1. 模 态 对 话 框 一 一 Dialog 

关于 Dialog，Material Design 是 这 样 说 的 : “Dialog 用 于 提示 用 户 做 一 些 决定 ， 或 者 是 完成 
某 个 任务 时 需要 一 些 其 他 额外 的 信息 。 Dialog 可 以 是 “ 取消 /确定 ”的 简单 应 答 模 式 ， 也 可 以 
是 自 定义 布局 的 复杂 模式 ， 例 如 说 一 些 文本 设置 或 者 是 文本 输入 。” 


简单 来 说 ，Dialog 主要 是 去 提示 用 户 当前 页 面 需要 去 做 选择 ， 而 用 户 必须 对 提示 框 的 内 容 
进行 响应 ， 才 能 进行 其 他 的 操作 。 


Dialog 一 般 包 合 标题、 内容 区 域 、 操 作 区 域 。 


AShort Title is Best * 一 一 一 标题 ， 也 可 以 没有 
Amessage should be a short, 


complete sentence. 一 一 一 内 容 区 域 ， 具 体 描述 用 户 需要 做 什么 选择 


Action 1 Action 2 一 一 一 操作 区 域 ， 二 选 一 


确定 下 载 歌 单 中 的 全 那 童 乐 ? | 
你 确定 要 退出 登录 ? 


取消 确定 


网 易 云 音乐 泣 滴 出 行 


操作 区 域 一 般 有 两 个 功能 按钮 ， 通 常 一 个 是 肯定 的 一 个 是 否定 的 〈 与 肯定 的 事件 对 立 ) 。 
一 般 积极 的 、 肯 定 的 或 者 说 产品 希望 用 户 做 的 选择 ， 会 放 在 右边 。 肯 定 的 事件 也 可 以 是 具 
有 破坏 性 的 ， 例 如 “删除 、 放 弃 ” 等 。 


肯定 事件 和 否定 事件 除了 可 以 使 用 “确认 “取消 外 ， 也 可 以 用 其 他 一 些 动词 或 者 是 动 
词 短语 来 代替 ， 例 如 “升级 、 上 点 错 了 ”等 。 


友情 提示 
内 容 尚未 保存 ， 你 确定 放弃 ? 


点 错 了 放弃 


Boss 直 聘 


1 ) 延展 一 一 自 定义 提示 框 


当然 也 有 只 包 合 一 个 功能 按钮 的 情况 ， 这 个 时 候 需 要 注意 的 是 弹出 的 消息 是 否 重 要 到 非 要 
用 户 点 击 确认 ， 如 果 是 ， 那 就 用 Dialog， 如 下 图 微 信 中 的 提示 框 ， 就 是 默认 只 有 一 个 功能 
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升级 提示 


品质 生活 ， 没 那么 复杂 

【生活 】 吃 局 玩乐 必 备 神谷 
【智能 】 生 活 智能 服务 平台 
【人 金融 】 专 业 智 能 金融 引擎 


掌上 生活 


按钮 的 Dialog。 如 果 不 是 ， 可 以 考虑 用 其 他 的 ， 例 如 Toast。 


你 的 微 信 帐 号 于 17:24 在 
HUAWEI-PRA-ALOOX 设 备 上 
通过 短信 登录 。 如 果 这 不 是 你 
的 操作 ， 你 的 短信 验证 码 已 经 


泄漏 。 请 勿 转发 短信 验证 码 ， 
并 排查 手机 是 否 被 植 入 木马 导 
致 短信 被 转发 。 


确定 
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由 于 Dialog 强制 要 求 用 尸 进行 操作 ， 用 尸体 验 不 是 很 好 ， 因 此 后 续 征 展 出 了 其 他 的 
样式 。 这 种 提示 框 也 有 操作 按钮 ， 它 和 Dialog 最 大 的 区 别 就 是 点 击 操作 按钮 或 者 提 
示 框 外 的 任何 位 置 ， 都 可 以 天 闭 该 提示 框 ， 降 低 了 操作 难度 。 但 它 不 算 严 格 意义 上 的 
Dialodg。 


这 类 提示 框 现在 较 多 用 在 自 定义 的 提示 框 上 ， 例 如 一 些 运营 活动 ， 上 自 定义 的 提示 框 能 更 好 
地 传达 内 容 ， 从 而 吸引 用 户 点 击 。 


me 98K 过 桥 米线 (..… 


味 忆 铭 牛 扒 饭 (,.. 
有 效 期 8 天 互 斥 券 


襄 乌 拉 和 外 美 团 外 卖 


2 ) 特殊 情况 

如 果 Dialog 出 现 三 个 或 以 上 的 功能 框 ， 会 增加 用 户 的 选择 负担 ， 而 且 横 向 显示 的 话 在 视 
部 上 也 显得 拥挤 ， 所 以 就 有 了 一 个 由 Dialog 延伸 出 来 的 Actionbar， 它 比 Dialog 拥有 更 
多 的 功能 按钮 ， 能 够 给 用 户 提供 更 多 的 功能 选择 。 
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标 为 未 读 


置顶 聊天 


设 为 私密 照片 


删除 该 聊天 
发 送 给 朋友 


收藏 
保存 图 片 


删除 


取消 


微 信 iOS 微 信 Android 


Actionbar 一 般 都 有 一 个 默认 的 “取消 ”功能 按钮 ( 当然 也 可 以 没有 ) 点 击 该 按钮 后 关闭 
弹 框 。 用 户 点 击 弹 窗 以 外 的 区 域 也 相当 于 点 击 了 “取消 ”按钮 ， 会 关闭 弹 框 。 


当 功 能 按钮 数量 过 多 时 ， 不 适合 用 文字 列表 的 形式 展示 ， 可 以 用 图 形 加 文字 的 形式 来 
展示 。 


2. 非 模 态 对 话 框 Snackbar 


关于 Snackbar, Material Design 是 这 样 说 的 : “Snackbar 是 一 种 针对 操作 的 轻 量 级 有 反 
馈 机 制 ， 常 以 一 个 小 的 弹出 框 的 形式 出 现在 手机 屏幕 下 方 或 者 桌面 左下 方 。 它 们 出 现在 屏 
幕 所 有 层 的 最 上 方 ， 包 括 浮 动 操作 按钮 。 


它们 会 在 超时 或 者 用 户 触摸 屏幕 其 他 地 方 之 后 自动 消失 。Snackbar 也 可 以 在 屏幕 上 滑动 
关闭 。 当 它们 出 现时 ， 不 会 阻碍 用 户 在 屏幕 上 的 操作 ， 并 且 也 不 支持 输入 。 屏 幕 上 同时 最 
多 只 能 显示 一 个 Snackbar”。 


49 


50 UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


ojsjelzl 可 ©@e 
手 国 所 和 5 投诉 复制 | 作 捷 问 新 
我 的 动 碗 生成 海报 
取消 取消 分 享 
微 信 喜马拉雅 


简单 来 说 ，Snackbar 是 介 于 Dialog 和 Toast 两 者 之 间 的 一 种 轻 量 级 反馈 机 制 ， 以 文本 
形式 存在 ， 可 以 包含 0 ~ 1 个 操作 ， 不 能 是 取消 按钮 。 


内 容 已 标记 为 已 读 


内 容 已 标记 为 已 读 
© SS 
当 只 以 文本 形式 出 现 的 时 候 ， 形 式 和 Toast 一 样 ， 不 需要 用 户 进 行 操作 ， 等 默认 时 长 结束 


后 会 自动 消失 ; 不 过 它 比 Toast 多 的 一 点 是 ， 用 户 可 以 在 屏幕 上 滑动 将 它 关 闭 。 
需要 注意 的 是 Snackbar 不 应 该 持续 存在 或 相互 堆 赤 ， 也 不 要 阻挡 浮动 操作 按钮 。 


延展 一 一 引导 浮 层 
由 于 Snackbar 太 受 限制 ， 不 能 有 图 标 只 能 以 文本 形式 存在 ， 在 现在 的 App 里 用 
得 越 来 越 少 ， 少 到 都 找 不 到 什么 例子 。 而 现实 中 又 需要 一 种 介 于 Toast 和 Dialog 
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之 间 的 轻 量 级 的 操作 提示 。 所 以 就 延伸 出 了 另外 一 种 样式 ， 暂 上 且 将 它 归 为 “引导 浮 
层 吧 。 


引导 浮 层 和 Snackbar 最 大 的 区 别 是 ， 它 可 以 有 图 标 、 图 片 ， 甚 至 还 可 以 引导 用 户 去 新 的 
页 面 ， 这 也 是 它 更 受 有 欢迎 的 原因 所 人 在。 


3. 非 模 态 对 话 框 
关于 Toast，Material Design 是 这 样 说 的 : “Toast 同 Snackbar 非常 相似 ， 但 是 
Toast 并 不 包含 操作 也 不 能 从 屏幕 上 滑动 和 关闭。 


Toast 


小 红 书 


简单 来 说 Toast 主要 的 作用 是 对 用 尸 当 前 的 操作 给 予 有 反馈， 用 户 不 需要 对 弹出 的 内 容 进行 
响应 ， 相 对 地 也 无 法 对 它们 做 出 控制 ， 只 能 等 设置 的 默认 时 长 结束 后 自动 消失 。 它 可 以 出 
现在 负面 的 任何 位 置 ， 可 以 是 纯 文本 的 ， 也 可 以 是 图 形 结合 文本 的 。 


oj 中 中 国 移动 4G 18:34 7 26% 划 4 will 中 国 移动 4G 18:38 了 等 306 攻 )f 
关 oe [加 关注 热门 属 三 
怎么 样 的 临 莫 才 最 有 效 成 就 是 演员 了 明星 “设计 ”电视剧 ”新 时 十 


模子 的 模子 Mandy 


iPhone 客户 端 


> 早 呀 早 晤 


我 的 留言 


Fj" 棍子 的 棍子 
海盐 社 
删除 
F 本 模子 的 模子 
海盐 社 加 转发 园 评论 心身 
删除 
公开 
档 子 的 楼 子 Mandy 了 
罗 18- 来 自 jPhone 客 户 庙 -一 
A  Ee ER 
EE 消息 发 现 加 


微 信 微 博 
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特别 说 明 


提示 框 的 作用 是 用 来 提示 信息 的 ， 但 不 是 所 有 的 提示 信息 都 需要 用 到 提示 框 ， 因 为 提示 框 或 
多 或 少 都 会 “打扰 ”到 用 户 的 操作 ， 所 以 能 有 别 的 解决 方式 的 上 时候， 优先 考虑 别 的 方式 。 


同 理 ， 提 示 框 存在 的 另 一 个 原因 就 是 在 用 户 犯 错 之 前 及 时 制止 他 ， 所 以 如 果 有 其 他 的 方式 
能 够 在 提示 框 出 现 之 前 就 规避 错误 ， 那 要 优先 使 用 。 以 京东 登录 页 面 为 例 ， 密 码 那 一 行 有 
一 个 小 眼睛 的 图 标 ， 点 击 之 后 显示 密码 。 当 用 户 认 为 自己 没有 输 错 密 码 ， 但 却 提醒 密码 错 
误 时 ， 与 其 多 次 尝试 来 找到 错误 所 在 ， 不 如 直接 和 点 击 显示 密码 的 图 标 体验 来 得 好 。 


ww 中 国 移动 4G 19:07 7 60%)$ 是 中 国 移动 4G 19:07 7 60%)s 
X 客服 xX 客服 
< 二 < 
571602094@qq.com 571602094@qq.com 
e099 忘记 密码 123 忘记 密码 
泵 东 


再 例如 像 支 付 宝 这 样 把 提示 信息 放置 在 按钮 上 ， 就 能 避免 提示 框 的 出 现 打扰 到 用 户 的 操 
作 ， 而 且 信息 放置 在 按钮 上 更 加 明显 ， 也 不 会 被 用 户 忽略 。 


0 中 中 国 移动 4G 19:10 7 63%) 
《 返回 提现 @ 
九江 银行 
尾 号 4115 储 攻 卡 


提现 金额 (收取 0.1% 服 务 费 ) 


¥11 


服务 费 0.10 元 全 部 提现 


由 计 两 小 时 内 到 账 ， 


支付 宝 


EE 


1. 提示 框 的 三 个 作用 
( 1 ) 提醒 用 户 ， 在 他 们 犯错 之 前 及 时 制止 ; 


(2 ) 给 用 户 选 择 权 ， 让 他 们 自己 决定 当前 的 操作 是 否 i 
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( 3 ) 告知 用 户 当前 所 发 生 的 事情 ， 让 他 们 对 当前 状态 有 一 个 预 估 ， 让 用 户 有 知情 权 。 


2. 提示 框 的 类 型 以 及 区 别 


Dialog 一 一 模 态 对 话 框 ， 


前 的 操作 流程 ; 


类 型 


必须 包含 
可 选 


不 包含 


使 用 场景 


出 现 位 置 


延展 样式 


Dialog 


模 态 对 话 框 


内 容 文本 ， 功 能 按钮 


标题 


无 


当 提示 信息 至 关 重 要 ， 必 须 用 户 
做 出 决定 的 时 候 


任何 位 置 
一 般 出 现在 页 面 中 间 


1. 提示 信息 明显 ， 不 容易 被 忽略 
2. 让 用 户 自己 做 选择 ， 让 他 们 党 
得 自己 有 话语 权 ， 体 验 好 


会 打 断 用 户 原本 正在 进行 的 操作 


自 定义 的 提示 框 


活动 夫 型 的 偶 多 


Toast 


非 模 态 对 话 框 


文本 


简单 的 图 形 


任何 操作 


当 提 示 信 息 只 需要 告知 用 户 不 需 
要 他 做 出 选择 的 时 候 


任何 位 置 


1. 用 户 当 前 的 状态 
2. 不 阻挡 用 户 原 本 正在 进行 的 操 
作 


1. 无 法 控制 显示 的 时 长 ， 只 能 等 
它 自己 消失 
2. 容易 被 忽略 


需要 用 户 对 当前 内 容 进行 操作 ， 不 会 目 动 消失 ， 会 打 断 用 户 之 


Snackbar 


非 模 态 对 话 框 


文本 


1 个 功能 按钮 
(以 文本 形式 存在 ) 


1. 图 标 
2. 取 消 按钮 


其 他 两 种 场景 之 外 的 任何 场景 
可 以 优先 考虑 这 个 


页 面 底部 


1. 纯 文 本 形式 ， 对 用 户 干扰 少 
2. 可 以 包含 一 个 操作 按钮 和 用 户 
互动 


1. 展示 内 容 少 且 单 调 ， 只 能 文本 
形式 

2. 只 能 出 现在 屏幕 下 方 ， 容 易 被 
键盘 等 元 素 算 挡 


引导 浮 层 
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Snackbar 一 一 非 模 态 对 话 框 ， 用 户 可 以 对 当前 内 容 进行 操作 ， 也 可 以 等 它 自 动 消 失 ， 不 
会 打 断 用 尸 的 当前 操作 ; 


Toast 一 一 非 模 态 对 话 框 ， 用 户 无 法 对 当前 内 容 进行 操作 ， 只 能 等 它 目 动 消失 。 
参考 资料 
Snackbars 与 Toasts http://t.cn/Ef5LFIB 


提示 框 (Dialogs) http://t.cn/Ef5yqFr 
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07 产品 询 表 布 局 


文 / 刘 芳 


企 设 计 产 品 列表 时 ， 经 常会 遇 到 不 知道 如 何 选 择 布局 样式 的 问题 。 最 后 大 家 的 解决 方案 大 

是 参考 竞 品 ， 禹 得 样式 不 错 融 用 到 上 自己 的 产品 中 ， 它 是 否 合适 并 不 清楚 。 本 文 归纳 了 党 
见 的 六 大 布局 样式 ， 即 列表 、 大 图 网 格 、 两 列 网 格 、 两 列 瀑布 流 、 拼 图 、 三 列 网 格 布局 ， 
通过 对 它们 优 缺 点 和 使 用 场景 的 分 析 ， 萤 握 在 什么 情况 下 采用 何 种 布局 方式 。 


列表 布局 


列表 布局 也 就 是 我 们 常见 的 图 片 列表 ， 主 要 由 商品 缩 略 图 和 多 个 文字 信息 组 合 而 成 ， 列 表 
布局 重 在 文本 内 容 ， 对 于 图 片 的 质量 要 求 不 高 ， 图 片 主要 为 了 起 到 视觉 引导 的 作用 。 


省 | 中 国 移动 全 下 午 5:07 Cl ui 中 国 移动 仿 下 午 5:07 Cl 
《 ”水 果 a 《 水果 
全 部 天 猎 店铺 淘宝 经 验 店铺 淘宝 经 验 
综合 销量 视频 @ 。 8 第 选 了 视频 O 8= 。 逢 选 了 


【 褚 想 旗舰 店 】2019 实 建 褚 相 
匠心 之 作 特级 10 斤 装 新 鲜 水 果 


海南 贵妃 芒果 新 鲜 水 果 10 斤 中 大 
果 带 箱 红 金龙 青 批发 包 邮 当 季 热 


公 巷 室 中 

¥39.8 | 

海南 三 亚 菠萝 察 23-25 斤 新 鲜 特 
产 热带 当 季 水 果 现 摘 40 大 树 波 
机 市 报 2% 


v109.9 21/ 


澳洲 进口 蜜 桃 3 斤 油 桃 新 鲜 水 果 
当 季 桃 批发 包 邮 水 密 桃 应 季 脆 桃 


列表 布局 淘宝 


优点 是 ， 遵 循 自 上 而 下 的 阅读 方式 ， 有 利于 信息 的 快速 扫 视 和 对 比 ; 空间 占 比 小 ， 一 屏 可 
展示 更 多 的 商品 ; 招展 性 好 ， 可 展示 更 多 促销 信息 。 
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缺点 是 ， 图 片 玉 寸 小 质量 差 ， 细 节 展 示 不 丰富 ; 样式 单一 、 趣 味 性 差 ; 由 于 信息 量 过 大 ， 


长 时 间 浏 览 会 引起 视 党 疫 劳 。 


虽 必 中国 移动 会 下 午 3:15 B10m 


全 部 点 评 排行 榜 网 红 打卡 
全 部 商 区 全 部 分 类 智能 排序 短 选 


城 门口 老 火 锅 ( 中 航 店 ) 园 
口 口 口中 局 1096 条 ¥78/ 人 

高 新 区 重庆 火锅 106m 
思 窜 人 吾 淡 铺 铺 度 科 是 人 党 村 阁 用 如 人 著 厅 
“知名 的 重庆 老 火 锅 品 牌 .的确 名 不 虚 传 * 
图 在 线 订 座 最 高 减 100 


国 8.8 折 


巴蜀 印象 原味 老 火 锅 ( 高 新 区 店 ) 国 

| 加 口 吕 DD 322 条 ¥ 88/ 人 

高 新 区 四 川 火锅 <100m 
人 气 火 和 祖 ”全 谋 料 是 ”得 贡 全 应 复古 主题 
“不 愧 是 老牌 子 的 火锅 了 ” 

88 代 100 元 

园 388 元 蚂 真 火锅 八 人 和 要，248 元 经 


锦 城 印象 火锅 酒楼 ( 德 商 国际 店 ) 
国 吕 口 OO 2561 条 ¥114/ 人 


高 狂 区 四 川 火 锅 319m 


马 苏 光 罗 本店。 人气 火锅 ” 锁 底 笠 是 ”菜品 健康 


掌 术 qd 味 放 好 服 芳 品 婧 致 “” 邯 肠 好 改 


大 众 尽 评 - 火 锁 


“川中 国 移动 令 下 午 10:06 了 可 六 本 了 
az EL So 
正在 热 号 即将 上 映 
四 实时 票房 今日 大 盘 7093.6 万 。 

侏 罗 纪 世界 2 加 

观众 评分 8.5 

导演 : 胡 安 .安东尼奥 . 巴 亚 纳 OO 
主演 : 克 里 斯 ' 帕 拉 特 

今 召 硬 业 | 一 局 电 光 


专访 | 女 主 角 揭秘 ， 电 影 为 慎 么 那么 吓人 * 


超人 总 动员 2 国 

97462 人 想 看 | 本 周 五 上 映 《3 
导演 : 布 拉 德 - 伯 香 

主 泣 :; 格 需 格 *T* 尼 尔 森 逢 利 . 享 特 


口 碍 壮 届 | 皮克斯 最 好 的 续集 作品 ， 

龙虾 刑警 

30994 人 起 看 | 本 周 五 上 映 ©@ 
导演 : 李 耳 其 

主演 : 王 千 源 专机 刀 刘 众 


AI EEB ES 一 
淘 票 票 - 电 影 


大 众 点 评 和 淘 票 票 都 可 以 算 团 购 类 App， 用 户 在 购买 时 不 会 看 商品 图 片 是 否 好 看 ， 决 定 用 
户 购买 的 天 键 是 这 个 商品 是 否 是 用 户 需要 的 ， 因 此 人 在 列 表 布 局 中 ， 标 题 、 产 品 参 效 、 促 销 


信息 是 用 户 比较 天 心 的 点 。 


什么 时 候 使 用 ? 


当 你 的 产品 图 片 质量 不 高 ， 产 品 数量 较 多 ， 需 
对 界面 效果 要 求 较 低 时 ， 可 以 采用 列表 布局 。 


大 图 网 格 布局 


大 图 网 格 布 局 一 行 只 展示 一 张 图 片 ， 由 于 图 片 占 比较 大 ， 因 此 一 屏 只 能 展示 1 ~ 2 张 ; 在 设 
计 上 它 可 以 分 为 通栏 和 非 通栏 设计 ， 通 栏 可 展示 更 多 的 信息 ; 非 通 栏 也 就 是 卡片 风格 ， 其 
视 党 表现 力 更 强 ， 多 用 于 以 图 片 浏 览 为 主 的 产品 。 


通过 优惠 信息 、 价 格 参数 等 来 进行 对 比 ， 
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1 有 中 国 移动 仿 上 午 12:16 7 和 * ) 4 中 中 国 移动 令 上 午 12:16 了 本 ) 


《 ”任何 目的 地 . 房 源 《< ”任何 目的 地 . 房 源 


整 赛 房子 . 1 室 2 床 1 卫 
1SETTE CONI- TRULLO EDERA 
#453 每 晚 . 免费 取消 预订 


克 女 奖 克 赤 128 


QQ © A ©O AQ 


探索 心 区 音 旅程 收 件 箱 个 人 资料 


大 图 网 格 布局 爱 彼 迎 


优点 是 ， 图 片 占 比 大 ， 可 以 展示 更 多 的 商品 细节 和 丰富 界面 效果 ; 同时 目 上 而 下 的 浏览 顺 
序 ， 有 利于 信息 有 效 传达 。 


缺点 是 ， 页 面 空间 的 消耗 大 ， 一 屏 可 展示 的 内 容 少 ， 不 利于 信息 的 查找 和 对 比 。 


il 中 国 移动 全 上 午 12:15 了 各 书画 了 All 中 国 移动 仿 下 午 5:55 人 @ 了 总 砷 了 
《 成 都 ~ 06.22-06.23 ~ 成 都 ~ 四 
位 置 ~ 箱 选 ~ 推荐 排序 ~ 今日 推荐 文艺 生活 户外 活动 DIY 手 人 


双流 小 胖 雅 舍 二 
4.9 分 超 哎 "20 条 评价 | 2 居 华 阳 手 冲 咖啡 + 意 式 咖啡 培训 课程 | 两 个 小 时 从 小 白 到 
丙 洲 “省 订 实 拍 ”很 于 净 长 租 优惠 


资深 咖啡 爱好 者 ， 冲 出 好 喝 的 咖啡 
美 愿 星 咖啡 馆 . 18km ' 美食 制作 


每 周一 至 周 日 9.30 


Li | 

| | 请 可 
夺 一 rz ”0 
Ie ~ 


be 
4 


懒 人 周末 -今日 推荐 
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蚂蚁 短 租 和 懒 人 周末 分 别 是 短 租 和 生活 类 App， 其 共同 点 是 用 户 在 使 用 时 主要 通过 图 
片 决定 是 否 购买 ， 采 用 大 图 布局 可 展示 更 多 的 细节 ， 帮 助 用 户 浏览 ， 提 升 整体 的 界面 
效果 。 


什么 时 候 使 用 ? 


当 你 的 产品 数量 较 少 ， 图 片 有 专人 维护 ， 需 要 突出 品牌 感 时 ， 融 可 以 采用 大 图 展示 。 大 图 
展示 往往 视觉 效果 好 ， 多 用 于 图 片 类 、 租 房 类 、 商 品 推荐 等 列表 中 。 


两 列 网 格 布局 


两 列 网 格 布局 也 就 是 将 屏幕 一 分 为 二 ， 图 片 和 文字 进行 上 下 展示 ， 类 似 一 个 网 格 ， 浏 览 次 
序 类 似 Z 字 ， 因 此 产品 都 能 均衡 地 被 用 户 看 到 。 该 布局 图 片 占 比 较 大 ， 对 图 片 质量 要 求 较 
高 ， 适 用 于 图 片 对 比 为 主 的 商品 ， 如 下 图 所 示 : 


€ Re A 
可 at 四 GB HT ben un 
M L XL 均 到 
ZUJAMD Ingrid Sune 
两 列 网 格 布 局 


优点 是 ， 利 于 图 片 类 商品 的 对 比 选择 ; 页 面 空间 消耗 小 ， 一 屏 可 展示 4 ~ 6 条 信息 ; 视觉 效 
果 较 好 。 


缺点 是 ， 文 字 信 息 展 示 空 间 少 ， 只 能 展示 商品 标题 、 价 格 、 标 签 等 参数 ， 当 文字 信息 过 多 
时 界面 会 显得 凌乱 。 
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“川中 国 移动 令 上 午 12:47 7 
夏季 专区 
夏季 茶 饮 。 。 减 脂 好 物 女士 夏装 。 ”男士 夏装 


夏 焕 新 ， 清 新 如 你 


¥ 29 ¥79 


16mm 筑 重 人 给， 亲密 的 轻 奢 ..… 百 初 袖口 的 仙 气 流露 ， 发 现 


女 式 典 雅 钞 色 真丝 衬衫 | 酒 霜 减 | 
个 ¥499 装饰 袖 针 织 连衣裙 


¥349 


下 \ s | 
\ | 
y \ 
二 一 葛 代 尔 面料 灵活 入 人 骨 ， 让 你 .， 清 吏 牛仔 衫 ， 胡 柏 盛 状 不 过 
WA 9 


Keep-- 商 城 严 选 


免 打 孔 家 用 单杠 防滑 吸 汗 手 胶 
¥ 149 ¥15 


Keep 一 商城 和 严 选 App 中 虽然 产品 有 所 不 同 ， 但 都 是 需要 用 户 通 过 图 片 对 比 进行 选择 ， 从 
产品 细节 展示 来 说 比 列 表 布 局 更 丰富 ， 从 产品 信息 对 比 来 说 比 大 图 更 便捷 ， 因 此 这 类 App 
中 两 列 网 格 布局 应 用 较为 广泛 。 


什么 时 候 使 用 ? 
如 果 你 的 产品 是 以 图 片 对 比 为 主 ， 同 时 又 不 需要 大 图 展示 时 ， 可 采用 该 布局 进行 设计 。 两 
列 网 格 布局 往往 和 列表 布局 会 一 起 使 用 。 


两 列 瀑布 流 布 局 


两 列 瀑布 流 布 局 也 就 是 将 屏幕 一 分 为 二 ， 和 常规 布局 类 似 ， 其 中 图 片 的 莞 固定 ， 高 随 图 片 
的 尺寸 变化 而 变化 。 相 比 于 两 列 网 格 布局 ， 泽 布 流 布局 更 加 不 规则 ， 适 用 于 产品 数量 较 
多 ， 用 户 目 标 不 明确 的 情况 下 使 用 ， 如 下 图 所 示 : 


59 


60 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


"川中 国 移动 令 上 午 12:38 @ 了 各 四 4 小 川中 国 移动 令 上 午 12:38 @100); 
Q | Q 搜索 
热门 附近 球鞋 单 品 玩具 家 居 热门 ”附近 单 品 ”玩具 家属 


两 列 瀑布 流 布 局 


优点 是 ， 可 根据 图 片 比 例 自 适 应 高 度 ， 图 片 的 细节 表达 更 有 力 ; 产品 展示 数量 多 ， 用 户 在 


使 用 时 可 以 无 限 下 滑 。 


缺点 是 ， 采 用 预 加 载 的 实现 方式 ， 因 而 不 能 预 估 产 品 多 少 的 数量 ; 在 浏览 时 产品 图 片 大 小 


不 一 ， 大 图 很 容易 被 记 住 ， 而 小 图 很 容易 被 忽略 。 


nice 每 日 搭配 精 选 ， 今 日 份 
#inice LOOK# 吾 上 限 片 来 
自 Gtinkoff @ 老 陈 是 花 儿 


SS 
我 真正 意义 上 开始 玩 潮流 艺 


术 收 藏 是 在 毕业 之 后， 懂 时 
由 于 既 济 能 力 有 限 ， 只 能 零 


alil 中 国 移 动 令 上 午 1:11 7a*m oil 中 国 种 动 令 上 午 12:16 了 国 ) 
二 关注 ” 发现 ”附近 《< ”水 果 新鲜 回 党 
〇 大 京都 在 搜 “ 这 就 是 对 唱 ” 全 部 天 锋 店铺 淘宝 经 验 
综合 销量 骂 ”和 视 选 了 


国内 小 众 旅游 地 一 一 来 小 
姐 丁 过 个 周末 一 一 福建 种 


可 夏 大 


V1680 


一 年 四 季 都 是 夏天 的 小 众 
旅游 地 兆 宝 宝 们 太 多 人 


本 BITIOF 


O4219 : 


[南京 篇 ] 南 京 旅游 攻略 | 
南京 小 众 拍照 圣地 一 一 牛 


中 


【月 销量 招 千 笔 】 【水 果 越南 红心 火龙 果 新 详 当 季 
王 站 和 2 ¥ 36.8 “925 人 付款 
Y28.8 1542 人 付款 


泰国 甲 仑 榴莲 新 说 常 充 柏 
海南 责 妃 蕊 果 新 鲜 水 果 10 

Y98 7463 人 付款 
[到 王 皇 机) 
¥99.8 1275 人 1 LE、 


淘宝 
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在 汇 忌 时 笔者 发 现 现 在 很 多 App 列 表 都 采用 了 瀑布 流 的 形式 ， 例 如 小 红 书 和 淘宝 ， 它 们 均 
是 以 图 片 展示 为 主 ， 同 时 图 片 多 为 第 三 方 上 传 ， 图 片 质量 不 统一 ， 产 品 数量 较 多 ， 故 采用 
瀑布 流 提 升 了 界面 的 趣味 性 ， 避 免 用 户 视觉 疫 劳 。 


什么 时 候 使 用 ? 


两 列 瀑布 流 布 局 和 两 列 网 格 布 局 的 使 用 场景 类 似 ， 唯 一 区 别 就 是 两 列 网 格 布局 在 产品 数量 
少 或 用 户 目 标明 确 时 采用 ; 而 瀑布 流 多 用 于 用 户 目标 不 明确 ， 同 时 产品 数量 多 ， 可 以 无 限 
下 滑 的 时 候 。 


拼图 布局 


拼图 布局 中 ， 头 部 常 以 一 张大 banner 的 形式 出 现 ， 下 面 是 由 几 张 图 片 以 各 种 拼图 形式 呈 
现 。 一 般 来 说 下 面 展示 的 信息 都 是 和 头 部 图 相关 的 商品 ， 适 合 平台 主动 推荐 的 商品 列表 ， 
如 下 图 所 示 : 


28 寸 纯 PC" 铝 框 ”( 非 全 .… 
109 升 大 容量 ， 满 足 全 家 出 行 
¥439 


恒温 可 调节 电热 水 达 ”智能 温 控 于 冲 覃 全 方位 袍 气 兆 化 器 
¥358 ¥ 288 ¥ 1088 
[限时 购 ] [三 五 福利 价 | 
两 列 拼图 布局 严 选 -人 气 推荐 
四 一 人/ 仆 忆 cs 


优点 是 ， 采 用 杂志 式 排 版 ， 样 式 上 更 活泼 美观 ; 产品 主 次 表达 更 清晰 ， 通 过 图 片 占 比 大 小 
就 可 以 确定 主要 和 次 要 信息 。 


缺点 是 ， 图 片 一 般 有 大 有 小 ， 小 的 也 很 容易 被 忽略 ; 另外 该 样式 编辑 成 本 高 ， 往 往 需 要 单 
独 推荐 。 
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il 中 国 称 动 全 上 午 1:30 7 如 由 面 ， “中国 称 动 令 上 午 T30 7 如 守 面 ， 
《 编辑 推荐 一 眼影 新 色 ~ 《 编辑 推荐 一 眼影 新 色 路 


sPINK COLOR 


粉色 系 是 小 仙女 必 备 , 涂 起 来 眼神 hin 湿 柔 , 颜色 深浅 适中 , 不 会 太 
大 张 , 就 算 手 残 党 也 能 分 分 钟 画 的 美美 的 
日 本 :性价比 之 王 斩 男 盘 
FT CANMAKE 完美 周 镶 I5 色 眼影 盘 14 梅 
| see | a 
PR 了 
a 加 到 
¥79 回 vx59 加 入 购物 车 


英国 .桃花 眼 妆 随手 画 
MAKEUP REVOLUTION 16 色 了 腿 影 盘 
桃 化 169 
[ 
* PINK COLOR 


粉色 系 是 小 仙女 必 备 , 涂 起 来 眼神 hin 温 柔 , 颜色 深浅 适中 ¥68 95 加 
夺 纺 , 就 算 手 政党 也 能 分 分 钟 画 的 美美 的 


中 国 - 超 美 多 盘 人 鱼 姬 色 


小 红 书 -推荐 


小 红 书 的 推荐 页 面 可 看 成 是 专题 页 ， 采 用 拼图 的 形式 展现 ， 将 重要 信息 放 到 大 图 上 ， 次 要 
言 息 放 到 小 图 上 ，5| 导 用 户 购 买 。 


什么 时 候 使 用 ? 


两 列 拼 图 布局 在 列表 中 使 用 较 少 ， 因 为 不 规则 的 拼图 会 导致 维护 成 本 过 高 ， 同 时 小 图 片 很 
容易 被 忽略 ， 因 此 多 用 于 推荐 负面 中 ， 图 片 由 编辑 经 过 处 理 之 后 再 进行 上 传 。 


三 列 网 格 布局 


三 列 网 格 布局 是 将 屏幕 一 分 为 三 进行 展示 ， 也 可 以 叫 宫 格 布局 。 由 于 模块 比较 小 ， 因 此 主 
要 以 图 片 展示 为 主 ， 文 字 信 息 一 般 只 有 人 简单 的 标题 ， 适 合用 在 用 户 需 求 不 明确 的 页 面 ， 如 
下 图 所 示 : 


起 刘 中 国 移动 仿 下 午 5:19 TV 


LE Te 攻 = f 
| 只 搜索 商品 ， 共 21432 款 好 物 上 - 


推荐 ”新 品 ”福利 社 ”限时 购 居家 鞋 E 


三 列 网 格 布局 


优点 是 ， 排 版 的 界面 利用 率 局 ， 一 屏 可 展示 的 产品 数量 最 多 ， 利 于 用 户 快速 浏 


感 兴趣 的 产品 。 


缺点 是 ， 图 片 展 示 尺 寸 小 、 质 量 低 ， 文 字 信 息 展 示 简 单 ， 对 比 性 较 弱 ， 界 面 的 趣味 性 和 新 


鲜 感 都 比较 差 。 


94 中 国 移动 倒 下 午 10:15 全 了 罗网 )# 
关注 日 榜 - 讨论 


NOTHING -日 榜 
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四 党 窜 will 志 下 午 3:43 了 了 如同 ， 


La BS Pe 加 草 
L 志 Q 搜索 商品 ， 共 21090 球 好 物 上 一 


I 条 | 


推荐 《新品 福利 社 ”限时 网 ”居家 生活 NK 


侠 开春 穿 搭 上 新 TED 


四 二 四 


男 式 亲 纹 工交 休闲 外 情侣 于 另 士 经 典 小 和 白 AI SeaSon 男 式 控 温 
碍 Y445 鞋 ¥339 此 仔裤 Y259 


男 式 经 上 典 真 兰 东 居 展 。” 妇 式 既 上 典 真 兰 家 居 服 。 哺 信 款 女士 经 身 小 白 
误 装 Y899 套装 Y899 陡 ¥299 


时 间 表 》 


LORD of 
VERMILION 红 ,.. 


敦 君 与 女 朋 友 Angels of Death 


哗 哩 哗 哩 - 瘟 剧 
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LNOTHING- 日 榜 和 哗 哩 哗 哩 -和 鳃 剧 为 例 ， 用 户 进 来 主要 是 为 了 看 看 有 没有 自己 感 兴趣 的 
内 容 ， 采 用 三 列 网 格 布局 可 以 展示 更 多 的 内 容 ， 帮 助 用 户 快 速 浏览 。 


什么 时 候 使 用 ? 


如 果 你 的 产品 只 是 为 了 展示 更 多 的 信息 ， 不 需要 通过 图 片 进行 对 比 时 ， 可 采用 三 列 网 格 
布局 。 


EE 


( 1 ) 当 用 户 需求 明确 上 时， 需要 选择 适合 高 效 对 比 的 布局 方式 ， 推 荐 使 用 列表 布局 、 两 列 
网 格 布局 、 两 列 瀑布 流 布 局 ; 其 中 列表 布局 适合 以 文字 对 比 为 主 的 商品 ; 两 列 网 格 布 局 和 
瀑布 流 布局 适合 以 图 片 为 主 的 商品 。 

(2 ) 当 用 户 需 求 不 明确 时 ， 就 需要 根据 产品 的 目标 进行 选择 。 产 品目 标 是 体现 品牌 性 或 


推荐 商品 ， 使 用 大 图 网 格 布 局 和 拼图 布局 ; 当 产 品目 标 是 想 快 速 促成 交易 ， 方 便 用 户 对 
比 ， 推 荐 使 用 两 列 瀑布 流 布 局 ; 当 产 品目 标 只 是 展示 界面 ， 推 荐 使 用 三 列 网 格 布 局 。 


( 3 ) 当 产 品 数 量 较 少时 ， 推 荐 使 用 两 列 网 格 布局 、 大 图 网 格 布局 。 其 中 大 图 网 格 布局 适 
合 图 片 质量 高 ， 有 专门 编辑 进行 维护 的 产品 ; 两 列 网 格 布 局 要 求 相对 少 很 多 。 反 之 ， 当 产 
品 数量 较 多 时 ， 推 荐 使 用 两 列 瀑布 流 布 局 、 三 列 网 格 布 局 。 


参考 资料 
无 线 工 坊 . 方寸 指 | 则 [Mj]. 北京 : 电子 工业 出 版 社 ，2014 
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08 按钮 


文 / 刘 芳 


按钮 设计 看 似 简单 ， 只 需要 画 个 矩形 框 然后 填 色 即 可 ， 但 其 实 按钮 的 功能 不 同 ， 设 计 方 式 
也 有 差异 。 另 外 ， 按 钮 的 一 些 设计 细节 很 容易 被 忽略 。 本 文 主要 从 按钮 功能 类 型 和 设计 要 
扣 两 个 方面 入 手 ， 对 按钮 设计 进行 全 面 的 解析 。 


按钮 功能 类 型 


按钮 主要 包括 行为 召唤 按钮 、 悬 浮 按钮 、 标 签 按钮 、 表 格 按 钮 、 开 关 按 钮 ， 其 功能 不 同 设 
计 万 式 也 不 同 。 


1. 行为 召唤 按钮 


行为 召唤 ( Call To action，CTA ) 按钮 的 目的 是 通过 设计 诱导 或 激励 用 户 点 击 ， 从 而 实 
现 产 品 的 诉求 。 主 要 包括 诱导 购买 、 订 阅 关 注 、 利 益 诱导 、 文 字 诱 导 四 种 。 


1 ) 诱导 购买 
当 行 为 召唤 的 目的 是 诱导 购买 时 ， 按 钮 的 设计 人 在 颜色 、 形 状 、 样 式 上 都 需要 突出 。 要 让 按 
钮 看 上 去 可 点 击 ， 让 用 户 进来 第 一 眼 就 能 知道 该 按钮 的 用 途 ， 如 下 图 所 示 : 


大 A 
三 是 时 [© 冤 
> 请 为 贡 权 功 


美 团 外 卖 淘宝 -详情 


美 团 外 卖 的 结算 按钮 颜色 采用 黑 黄 对 比 、 形 状 采 用 具有 亲和力 的 圆 角 ， 人 在 样式 上 加 入 投影 
的 同时 加 入 适 和 餐 员 的 元 素 ， 配 上 小 红 点 ， 再 加 上 价格 诱导 ， 让 用 户 可 以 直观 看 到 优惠 了 多 
少 钱 ， 促使 用 户 进一步 操作 。 


淘宝 详情 的 “加 入 购物 车 和 “马上 抢 ”是 一 个 组 合 按钮 ， 作 为 行为 召唤 按钮 可 以 明确 地 
看 到 ， 其 从 颜色 、 形 状 、 样 式 都 能 够 让 用 户 快 速 注意 到 。 
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2 ) 订阅 关注 

当 行 为 召唤 的 目的 是 订阅 关注 时 ， 其 重要 程度 相 比 诱导 购买 低 很 多 ， 但 是 在 设计 时 仍然 需 
要 考虑 一 个 问题 用户 关 注 更 重要 还 是 用 户 阅 读 内 容 更 重要 。 当 内 容重 要 时 ， 按 钮 的 设计 
需要 弱化 处 理 ， 例 如 优酷 视频 ; 当 总 击 天 注重 要 时 ， 按 钮 的 设计 需要 强化 处 理 ， 例 如 土豆 
视频 ， 如 下 图 所 示 : 


《 流 湿地 球 》 经 费 不 足 , 却 破 40 亿 荣 登 电影 排 
行 榜 , 我 们 赢 的 是 口碑 ! 

对 过 国产 电影 ， 近 些 年 来 一 直 被 许多 观众 们 吐槽 ， 许 
多 大 成 本 高 投资 避 请 当红 一 线 流 量 小 花旦 等 制作 的 .…. 


> YY i ne 这 二 过 戏 作为 全 的 宣 

人 @ 反 人 关 综艺 不 疾 玲 有 is 
ds ~ 

优酷 视频 -内 容重 要 土豆 视频 _ 关 注重 要 


优酷 视频 星球 负面 的 目的 主要 是 引导 用 户 去 阅读 内 容 ， 感 兴趣 你 就 关注 ， 因 此 在 设计 时 对 
关注 按钮 进行 了 弱化 处 理 ， 让 按钮 和 界面 融合 。 


土豆 视频 关注 界面 的 目的 主要 是 引导 用 户 关 注 。 因 此 按钮 设计 较为 明显 ， 采 用 黄色 填充 加 
图 标 引 导 ， 在 视 党 上 和 产品 内 容 形成 强烈 对 比 。 


3 ) 利益 诱导 
当 行 为 召唤 的 目的 是 利益 诱导 时 ， 可 以 考虑 在 颜色 、 形 状 、 图 标 、 诱 导 文 字 等 方面 设计 ， 
引导 用 户 点 击 ， 如 下 图 所 示 : 


天 天 领 美 与 天 孝 有 奖 呈 

(EY -0-@-@-@-e | SI 打 榜 送 心跳 红包 
867502 

CE] 要 一 搜 了 中 大 (Ci) AS 
必修 任务 

CE] 看 看 欣 门 推荐 菜 (Wm ee ) © 和 

可 购 70 积 分 、1 个 勋 章 v 
大 众 点 评 -每 日 福利 腾讯 视频 -doki 


大 众 操 评 领 奖 按 钮 明显 比 赚 积 分 的 层级 高 ， 因 此 为 了 突出 领 奖 按 钮 ， 采 用 了 色 块 设计 的 样 
式 ， 同 时 赚 积 分 按钮 采用 摘 边 设计 进行 弱化 处 理 。 
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腾讯 doki 打 榜 页 面 冲 榜 的 重要 层级 最 高 ， 因 此 在 设计 时 不 仅 采 用 了 色 块 、 加 入 了 动 效 图 
标 ， 同 时 还 加 入 了 诱导 文字 ， 让 按钮 更 明显 ， 诱 导 用 户 点 击 ， 其 他 按钮 则 采用 摘 边 样式 弱 
化 处 理 。 


4 ) 文字 诱导 

文字 诱导 简单 来 说 惑 是 通过 文字 ， 诱 导 用 户 进行 下 一 步 操 作 ， 多 用 于 空 页 面 、 活 动 页 面 
中 ， 因 此 在 设计 时 采用 简单 的 色 块 填充 即 可 。 如 果 该 页 面 为 活动 页 面 ， 也 可 增加 渐变 或 投 
影 样式 ， 让 按钮 更 有 空间 感 ， 进 而 突出 按钮 ， 如 下 图 所 示 : 


9 时 中 国 移动 令 下 午 5:51 了 可 大 )/ elli 中 国 移动 令 上 午 12:54 Tm) 


学 习 计划 我 的 攻略 


我 创建 的 攻略 我 收藏 的 攻略 


怕 什 么 真理 无 穷 ， 进 一 才 有 一 才 的 欢喜 
胡适 


开始 制定 学 习 计 划 


下 次 查找 更 方便 


© 国 项 人 查看 本 地 热门 攻略 
学 习 计划 
得 到 大 众 扣 评 


得 到 的 “学 习 计划 ”界面 为 空 时 ， 为 了 促进 用 户 进 行 下 一 步 操作 ， 它 的 按钮 文字 “开始 制 
定 学 习 计 划 ”直接 诱导 用 户 制定 ， 同 时 其 按钮 采用 重要 程度 较 高 的 色 块 加 投影 的 方式 ， 诱 
导 用 尸 点 击 。 


大 众 点 评 “ 我 的 攻略 ”界面 为 空 时 ， 为 了 让 用 户 创建 攻略 ， 它 的 按钮 文字 “我 也 要 创建 攻 
略 。” 直接 诱导 用 户 创建 ， 同 时 其 按钮 采用 渐变 填充 的 方式 ， 诱 导 用 户 点 击 。 

2. 悬浮 按钮 

悬浮 按钮 是 Android 应 用 中 最 常见 的 一 个 控件 。 不 过 随 看 Android 和 iOS 规 范 的 不 断 融 合 ， 
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在 iOS 中 也 经 常会 看 到 各 种 各 样 的 悬浮 按钮 。 在 设计 上 悬浮 按钮 应 该 采用 显眼 的 颜色 ， 以 
抓 住 用 户 的 注意 力 ， 同 时 它 应 该 是 积极 正 向 的 交互 ， 例 如 创建 、 分 享 、 探 索 等 ， 如 下 图 
所 示 : 


: 克 大 胖 猫 ， 
甘 食 视频 自 媒 体 


早餐 饼 新 吃 法 ， 比 手 抓 饼 做 法 简单 ， 比 鸡蛋 
饼 好 吃 ， 老 婆 4 个 不 够 吃 


UC 浏览 器 -正常 UC 浏览 器 -展开 


UC 浏览 器 的 悬浮 按钮 采用 蓝 色 背景 和 日 色 添加 图 标 ， 具 有 很 强 的 提示 作用 ， 点 击 按钮 即 
可 呼出 对 应 的 上 友 布 图 文 或 者 视频 的 功能 。 


3. 标签 按钮 

标签 按钮 往往 呈 多 个 出 现 ， 在 使 用 时 可 以 看 成 一 种 筛选 条 件 ， 采 用 该 设计 方式 可 减少 用 户 
操作 步骤 ， 提 高 操作 效率 。 不 过 标签 的 重要 程度 仍然 较 低 ， 在 设计 时 需要 弱化 处 理 ， 如 下 
图 所 示 : 


支付 宝 - 保 险 转 转 


支付 宝 投 保 页 面 ， 为 了 帮助 用 户 快 速 做 出 选择 ， 采 用 了 标签 的 设计 方式 。 由 于 其 重要 程度 
不 及 “我 要 投保 ”高 ， 因 此 在 设计 时 默认 用 描 边 处 理 ， 选 中 后 采用 较 浅 的 色 块 填充 。 


转 转 产品 列表 页 ， 筛 选 条 件 下 方 也 采用 了 标签 设计 ， 由 于 用 户主 要 目的 还 是 浏览 商品 ， 
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此 标 等 按钮 样式 默认 采用 浅 灰 色 ， 选 中 效果 为 较 浅 的 色 块 加 摘 边 。 


4. 表格 按钮 


表格 按钮 是 由 一 个 日 色 网 格 加 文字 组 成 ， 从 视 党 上 看 和 页 面 融 为 一 体 ， 特 别 不 突出 。 因 此 
多 在 个 人 中 心 设置 页 面 想 要 弱化 按钮 的 情况 使 用 ， 如 下 图 所 示 : 


切换 帐号 
退出 登录 


给 影院 提 建 议 
信息 纠 错 


微 信 淘 票 


油 


微 信 设置 界面 的 “切换 账号 和 “退出 登录 由 于 不 是 核心 操作 按钮 ， 同 时 为 了 和 界面 表 
格 协调 ， 设 计时 采用 表格 按钮 将 其 弱化 处 理 。 


淘 票 票 影院 介绍 页 面 底部 设置 了 “给 影院 提 建 议 和 “信息 纠 错 ”， 很 明显 不 需要 引导 用 
户 操作 ， 设 计时 采用 表格 按钮 将 其 弱化 处 理 。 


5. 开关 按钮 
开关 按钮 是 两 种 相互 对 立 状 态 上 间 的 切换 ， 多 用 于 功能 的 开启 和 关闭 。 当 按钮 开启 后 可 能 还 
会 融 来 其 他 的 相应 操作 。 开 天 按钮 多 用 在 设置 界面 ， 但 是 也 有 很 多 App 将 其 用 到 其 他 界面 
中 ， 如 下 图 所 示 : 


需要 发 票 


您 可 在 入 住 完成 10 天 内 补 全 信息 


全 号 码 保护 个 所 ) 


对 两 家 、 骑 手 隐藏 您 的 页 实 手机 号 ， 保 护 您 的 隐 直 


美 团 外 卖 小 猪 短 租 


美 团 外 卖 提 交 订 单 界面 中 的 “号 码 保 护 ” 就 采用 了 开关 按钮 ， 相 比 其 他 滑动 选择 的 交互 状 
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态 来 说 ， 开 关 按 钮 无 疑 可 以 减少 操作 步骤 ， 提 高 操作 效率 。 


小 猪 短 租 提交 订单 界面 中 的 “需要 发 票 ” 也 采用 了 开关 按钮 ， 当 开启 按钮 会 展开 提示 你 去 填 
写 信 息 ， 当 关闭 按钮 提示 信息 隐藏 ， 相 比 于 其 他 选择 控件 ， 这 里 用 开关 按钮 更 为 合适 。 


按钮 设计 要 所 


上 面 总 结 了 五 大 功能 按钮 的 表现 形式 和 使 用 场景 ， 此 外 ， 要 设计 出 一 个 引导 性 好 的 按钮 ， 
还 需要 重视 一 些 细节 ， 例 如 颜色 、 形 状 、 状 态 、 位 置 等 。 


1. 颜色 


颜色 是 最 容易 感知 到 的 对 比方 式 ， 不 同 的 颜色 会 给 用 户 不 一 样 的 心理 预期 。 人 在 设计 时 ， 近 
钮 颜色 主要 有 主题 色 、 强 调 色 、 辅 助 色 。 主 题 色 多 用 于 需要 强调 的 行为 召唤 按钮 、 悬 浮 按 
钮 、 开 天 按钮 中 ; 强调 色 多 用 于 需要 拉 开 主 次 天 系 的 按钮 组 中 ， 一 般 采 用 主题 色 的 对 比 色 
彩 或 者 邻近 色 ; 辅助 色 多 用 于 默认 状态 或 不 可 点 击 的 状态 中 ， 如 下 图 所 示 : 


Keep- 主 题 色 UC 浏览 器 -强调 色 天 猫 -辅助 色 


Keep 首 页 的 “查看 我 的 训练 计划 ”按钮 直接 采用 主题 色 ， 不 仅 可 以 起 到 很 好 的 强调 作用 ， 
同时 和 界面 风格 也 比较 协调 ; UC 浏览 器 小 视频 的 “我 来 拍 ” 按 钮 采用 邻近 色 绿 色 渐 变 来 强 
调 ， 引 导 用 户 拍摄 小 视频 ; 天 猫 选 择 尺码 标 签 时 ， 按 钮 的 默认 状态 采用 辅助 色 灰 色 来 突出 选 
中 状态 。 
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2. 形状 
在 设计 按钮 时 ， 需 要 根据 整个 界面 风格 设计 合适 的 形状 ， 主 要 有 直角 、 小 圆 角 、 全 圆 角 、 
异形 四 种 样式 。 


小 圆 角 


直角 的 含义 : 严谨 、 力 量 、 高 端 。 各 用 于 金融 类 、 奢 侈 品类 产品 中 ， 让 产品 给 人 严谨 、 安 
全 、 高 端的 感觉 ， 例 如 寺 库 的 按钮 设计 。 
小 圆 角 的 含义 : 稳定 、 中 性 。 适 用 于 用 户 跨 度 较 大 的 常规 类 产品 中 ， 候 必 0 微 信和 的 按钮 设计 。 


全 圆 角 的 合 义 : 活 泌 、 年 轻 、 安全。 适用 于 儿童 类 、 年 轻 类 、 娱 乐 类 、 购 物 类 的 产品 中 ， 
提升 亲和力 ， 拉 近 用 户 的 距离 ， 例 如 土豆 的 按钮 设计 。 

异形 按钮 的 售 义 : 不 稳定 、 活 泼 、 另 类 。 适 用 于 需要 用 户 做 出 选择 的 场景 中 ， 例 如 招商 银 
行 “ 话 题 PK ”的 按钮 设计 。 


癌 笋 去 ,ol 令 下 午 5:38 了 all 中 国 先 动 令 上 午 2;40 Um 让 中 国 种 动 令 上 午 12;50 +m 
登录 年 前 Xx 注册 手机 快捷 登录 x 


娃 
回 
站 
四 
$ 


国家 /地 区 ”中 国 
18186868686 10196889696 
+ 话题 PK 
598542 43s 后 重新 详 乳 超 一 亿 人 用友 图 三 天 可 见 ， 你 是 其 中 一 员 吗 ? 
用 答 信 号 /QQ 号 /好 箱 登录 


一 
下 一步 


账号 登录 py 热门 活动 更 
首次 体 粒 财 高 体 以 加 
全 大 101 让 2 E 
8 四 S&S 合 ATM 无 卡 存 且 款 es 一 
| Da 登录 多 并 信 登录 找 回 密 码 | 更 多 选项 A 回 © D 只 


寺 库 -直角 微 信 -小 圆 角 土豆 -全 圆 角 招商 银行 -异形 
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寺 库 是 奢侈 品类 电 商 ， 它 的 按钮 采用 直角 设计 ， 刚 好 可 体现 奢侈 品 的 高 端 性 ; 微 信 的 用 户 
群体 上 到 七 八 十 多 ， 下 到 几 多 ， 其 年 龄 范围 广 ， 因 此 采用 稳重 的 小 圆 角 较为 稳妥 ; 土豆 短 
视频 用 户 群 体 年 轻 活泼 ， 因 此 采用 全 圆 角 较为 适合 ; 招商 银行 话题 PK 采用 异形 的 设计 ， 
会 给 用 户 不 稳定 和 另类 的 感觉 ， 从 而 引导 用 户 参 与 。 


3. 状态 


在 部 分 界面 设计 中 需要 考虑 按钮 的 状态 设计 ， 从 而 提高 用 户 操作 的 流畅 度 。 移 动 端 完 整 的 
系统 按钮 可 以 分 为 正常 状态 、 按 压 状态 、 禁 用 状态 。 


= 
按压 #FF7D11 加 15% 黑 色 蒙 层 
禁用 #FF7D11 不 透明 度 45% 


按钮 状态 


其 中 ， 正 常 状态 ( 包括 加 载 状 态 ) 展示 的 是 App 的 主 色 ; 按压 状态 在 正常 状态 的 基础 上 者 
加 15% 的 黑色 ; 禁用 状态 一 般 是 灰色 或 者 将 正常 状态 的 透明 度 降低 至 45%， 该 状态 多 用 于 
提交 表单 按钮 ， 例 如 登录 、 注 册 、 转 账 等 ， 如 下 图 所 示 : 

的 本 .9 J ee i 


,| 转 入 至 理财 金 _ 转 入 至 零用 氏 ,| 转 入 至 理财 金 _， 转 入 至 零用 钱 


7 日 年 化 3.4530% 7 日 年 化 3.4530% 


转 入 1000 元 ， 镍 计 每 日 收益 0.09 元 预 半 每 日 收益 0.09 元 
2018 年 11 月 16 日 般 天 ) 开 始 计算 收益 ，2018 年 11 月 17 日 (后 天 ) 收 2018 年 11 月 16 日 (了 明天) 开始 计 得 收益 ，2018 年 11 月 17 日 (后 天 ) 收 
盖 虽 三 el 
® 农业 银行 ( 尾 号 8888) ® 农业 银行 ( 尾 号 8888) 
单 笔 阻 额 1 万 ， 单 日 限额 1 单 笔 限 竹 1 万 ， 单 日 服 客 1 


确认 转 入 


京东 金融 
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京东 金融 转账 页 面 ， 当 未 输入 转账 金额 时 ， 按 钮 禁用 为 灰色 ; 当 输 入 金额 时 按钮 为 正常 状 
态 。 在 操作 中 可 以 发 现 京东 金融 没有 按压 状态 ， 这 是 因为 随 着 网 络 的 友 展 ， 咒 市 速度 越 来 
越 高 ， 按 压 状 态 显 得 没有 必要 。 


4. 位 置 


位 置 往 往 对 主 操作 按钮 较为 重要 ， 在 设计 时 需要 以 引导 用 户 、 方 便 用 户 点 击 为 自 的 。 主 操 
作 按 钮 的 位 置 主要 有 三 种 ， 即 固定 在 底部 、 页 面 跟随 、 将 希望 用 户 操作 的 按钮 置 于 按钮 组 
石 侧 。 


腹 肌 手 裂 者 初级 


小 米 8 青春 版 


Keep- 固 定 底部 饿 了 么 -页 面 跟随 小米 商城 - 置 于 按钮 组 右 侧 


根据 费 茨 定律 可 知 ， 按 钮 位 置 越 近 用 户 所 需 的 时 间 融 越 得 ， 因 此 Keep 的 开通 会 员 按钮 置 
于 底部 ， 方 便 用 户 快 速 操作 。 


俄 了 么 的 新 增 地 址 界面 中 ， 按 钮 跟随 在 信息 后 面 ， 用 户 看 完 信息 即 可 点 击 保存 。 需 要 注 
意 ， 当 表单 信息 较 多 时 ， 也 推荐 采用 固定 到 底部 的 方式 减 短 用 户 操作 成 本 。 


小 米 商 城 详情 页 的 “加 入 购物 车 ”按钮 置 于 界面 右 人 出 ， 其 一 是 为 了 视觉 平衡 ， 其 二 是 符合 
人 先 点 右 侧 按钮 的 使 用 习惯 。 


EE 


( 1 ) 当 行 为 召唤 的 目的 是 诱导 购买 时 ， 按 钮 的 设计 不 管 从 颜色 、 形 状 还 是 样式 都 需要 突 
出 。 让 按钮 看 上 去 可 点 击 ， 让 用 户 进 来 第 一 眼 就 能 知道 该 按钮 的 用 途 。 


( 2 ) 当 行 为 召唤 的 目的 是 点 击 按钮 时 ， 按 钮 需要 强化 处 理 ， 例 如 采用 主题 色 、 强 调 色 、 
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添加 图 标 等 方式 ; 当 目 的 是 浏览 内 容 时 ， 按 钮 可 弱化 处 理 ， 例 如 按钮 采用 浅 色 、 灰 色 。 
( 3 ) 提交 表单 按钮 可 分 别 设计 正常 、 禁 用 状态 ， 避 免 用 户 错误 操作 。 


(4 ) 当 需 要 用 户 快 速 操作 时 ， 将 主 操作 按钮 固定 在 界面 的 底部 ; 按钮 组 中 希望 用 户 点 击 
的 按钮 则 置 于 右 侧 。 


参考 资料 
学 习 按 钮 设计 ， 看 这 篇 束 够 了 | http://t.cn/Rn86MOJ 


7 个 按钮 设计 基本 规则 http://t.cn/Eq6mG8R 
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09 标签 


文 / 姜 正 


标签 是 日 常设 计 中 使 用 频率 最 高 的 组 件 之 一 ， 它 功能 强大 、 使 用 场景 多 样 化 ， 从 而 深 受 设 
计 师 们 的 喜爱 。 优 秀 的 标签 设计 能 够 帮助 产品 传递 准确 的 信息 ， 完 成 当前 的 业务 目标 。 


标签 的 定义 


标签 是 事物 抽象 出 来 的 定义 ， 方便 用 户 标 记 和 机 器 识别 。 这 里 需要 理解 标签 在 用 户 行 为 层 
面 的 使 用 ， 用 户 最 终 通过 标签 进行 信息 传递 和 交互 操作 。 


标签 的 特征 


标签 的 主要 特征 有 : 
@@ ”开放 性 ， 即 所 有 用 户 可 见 。 
@ 轻 量 化 ， 主 要 以 关键 词 的 形式 呈现 。 


@ 参与 性 ， 即 标签 可 以 由 用 户主 动 生成 。 
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标签 的 作用 


标签 主要 有 两 个 作用 : 一 是 信息 传递 ; 二 是 交互 操作 。 


1. 信息 传递 


信息 传递 是 标签 设计 的 关键 ， 无 论 是 图 形 标签 还 是 文字 信息 标签 ， 首 要 的 任务 都 是 正确 地 传 
递 信 息 ， 只 有 这 样 才能 让 用 户 产生 正确 的 联想 ， 进 而 执行 下 一 步 操 作 。 


可 以 这 样 理 解 ， 标 签 信息 是 为 了 满足 用 户 的 隐 性 需求 ， 当 用 户 人 在 犹豫 是 否 要 进行 下 一 步 操 
作 的 时 候 ， 标 签 信息 可 以 加 强 用 户 的 需求 欲望 ， 促 进 完成 下 一 步 操 作 。 


结合 上 述 标 签 轻 量化 的 特征 ， 标 签 都 是 由 提取 的 关键 词 或 图 形 组 成 。 根 据 产品 属性 和 业务 
的 不 同 ， 关 键 词 的 维度 也 有 所 不 同 。 例 如 ， 偏 向 内 容 的 平台 一 般 都 会 从 内 容 中 提取 关键 
词 ， 来 达到 为 其 他 同属 性 内 容 引 流 的 目的 。 


© 提取 关键 词 © 点 击 跳 转 
OO 一 (0) OO 


而 电 商 快 销 类 平台 则 是 为 了 达到 业务 目标 ， 尽 量 突 出 与 用 户 利益 相 天 的 优惠 活动 。 例 如 将 
热 销 、 精 选 、 满 减 等 目的 性 特别 强 的 词语 作为 天 键 词 。 


OOOOOO 


2. 交互 操作 
标签 设计 的 最 终 目 的 其 实 是 帮助 用 户 完 成 交互 操作 ， 其 主要 形式 分 为 可 点 击 交 互 和 不 可 点 
击 交互 两 种 。 


可 点 击 交互 的 标签 一 般 多 用 于 产品 内 部 流量 分 友 、 为 其 他 同属 性 内 容 导 流 ， 点 击 标签 进入 
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其 他 页 面 ; 不 可 点 击 交 互 的 标签 则 是 辅助 业务 模块 ， 通 过 关键 词 信息 刺激 用 户 点 击 业务 模 
块 。 如 果 用 户 对 于 是 否 点 击 该 业务 模块 还 心 存 犹 聊 ， 这 个 时 候 就 需要 标签 设计 作为 助力 
剂 ， 正 确 地 传递 关键 信息 ， 刺 激 用 户 点 击 。 


标 釜 的 使 用 场景 

标签 的 使 用 场景 较为 广泛 ， 这 里 归纳 总 结 了 几 种 常见 于 现 有 App 的 使 用 场景 

1. 产品 展示 和 运营 活动 

产品 展示 和 运营 活动 是 标签 最 经 常 出 现 的 两 个 场景 ， 因 为 这 两 个 场景 都 具有 很 强 的 目的 性 。 


产品 展示 的 目的 是 为 了 提高 用 户 的 点 击 购买 率 ， 所 以 除了 商品 基本 信息 之 外 ， 需 要 添加 更 
加 符合 用 户 利 益 的 关键 词 标 签 来 吸引 用 户 ， 辅 助 其 完成 点 击 跳 转 的 任务 。 这 种 使 用 场景 在 
电 商 平台 中 十 分 常见 ， 这 里 以 小 红 书 为 例 ， 如 下 图 所 示 : 


小 红 书 
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小 红 书 的 商品 展示 模块 会 将 “折扣 信息 ”和 “上 自 营 ”等 标签 放 在 底部 ， 一 方面 刺激 用 户 直 
接点 击 购买 ， 另 一 方面 方便 用 户 根据 天 键 词 去 判断 选择 哪 种 购买 的 方式 会 更 加 实惠 。 
运营 活动 则 更 多 是 为 了 激 上 用户 的 参与 感 ， 需 要 从 多 方面 赢得 用 户 的 信任 。 一 般 情 况 下 会 
通过 天 键 词 加 强 与 用 户 之 间 的 情感 和 利益 联系 ， 从 而 促使 用 户 人 在 短 时 间 之 内 做 出 决定 。 这 
里 以 下 厨房 为 例 : 


will 中 国联 通 全 下 午 5:29 @ 7 100% Ms 
< 减 脂 专栏 由 


¥ 29.9W26 期 


用 36 道 美食 ， 揭 开 减 ”跟着 Sunny 打 造 你 的 健 


下 厨房 


下 厨房 的 活动 区 通过 添加 “夏秋 特辑 ”的 标签 ， 来 满足 用 户 潜 在 对 夏秋 养生 的 需求 ; 通过 
底部 添加 的 “专栏 ”标签 来 提高 活动 的 专业 度 ， 赢 得 用 户 的 信任 。 下 厨房 从 潜在 需求 和 专 
业 的 角度 促进 了 用 户 点 击 参与 的 欲望 。 


2. 模糊 推荐 

用 户 进 入 一 个 新 的 场景 的 时 候 ， 还 没有 明确 的 目的 ， 这 个 时 候 需 要 提供 “兴趣 标签 ”来 引 
导 用 户 根据 平时 自己 的 兴趣 爱好 选择 标签 ， 产 品 再 基于 用 户 选 择 的 标签 来 推荐 用 户 可 能 感 
兴趣 的 内 容 ， 避 免 用 户 因为 内 容 不 符合 喜好 而 直接 天 掉 页 面 。 最 常见 的 使 用 场景 就 是 兴 
标 等 页 ， 以 虎 扑 为 例 : 
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社区 大 爆炸 ! 无 数 新 奇 好 玩 的 话题 


阴间 找到 感 兴趣 的 内 容 


| 步行 街 


交 不 能 错过 的 新 闻 转 帖 恋爱 那些 事 
交 理性 讨论 不 吹 不 黑 以 这 波 什么 水 平 


| 娱乐 


次 在 虎 扑 看 片 次 流量 明星 进来 挨打 


| 搞笑 
六 搞笑 视频 次 哈 破 图 都 有 


进入 全 新 社区 > 


虎 扑 


在 进入 虎 扑 首页 时 ， 通 过 “兴趣 标签 ” 流 的 形式 引导 部 分 目的 不 明确 的 用 户 来 选择 自己 感 
opti 页 当中 ， 满 足 了 用 户 的 潜在 需求 。 


3. 内 容 导 流 


为 平台 内 其 他 内 容 进 行 导 流 也 是 标签 重要 的 功能 之 一 ， 常 见 内 容 导 流 的 方式 有 两 种 : 一 种 
是 文 末 出 现 天 联 性 标签 ， 另 一 种 则 是 搜索 时 出 现 天 联 推荐 。 


当 用 户 浏 览 完 当前 的 内 容 后 ， 会 有 浏览 其 他 相 天 联 内 容 的 潜在 需求 ， 这 个 时 候 可 以 通过 从 
文中 提取 “天 键 词 ” 标 签 来 满足 用 户 这 一 需求 。 一 般 天 联 标 签 会 出 现在 文 末 的 底部 ， 用 户 
在 阅读 完 文章 之 后 根据 自己 的 需求 进行 选择 点 击 。 我 们 以 简 书 为 例 : 
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sl 中 国联 通 全 下 午 5:54 @ 了 100% B's 
链接 : 
http://www.xinmei6.com/content.html? 
newsld=29523 
来 源 : 新 媒 之 家 
| 有 道理 > | | 提升 类 > | | 北 岛 知 骞 > | | … | 


(0 3455 Ey © , 


新 年 太吉 ! 


Lu 
六 文 坷 


陈冠希 夫妇 度假 ， 素 颜 大 务 恩 爱 ， 
网 友 : 不 返 架 子 ， 不 庶 伪 ， 好 评 ! | 


李 未 清仓 


简 书 


简 书 通过 从 内 容 中 提取 相关 的 “天 键 词 ”标签 ， 满 足 用 户 浏 览 同属 性 内 容 的 潜在 需求 ， 同 
时 达到 了 为 平台 内 其 他 内 容 引 流 的 目的 。 


搜索 时 出 现 关联 性 推荐 是 产品 为 内 容 进行 导 流 的 重要 方式 之 一 。App 会 根据 用 户 日 常 浏览 


四 担 索 ll 全 下 午 5:58 @ 了 100% We + 
宝贝 ~ 取消 
推荐 搜索 
Xbox ps3 ps4slim 繁星 牢记 本 手机 
历史 搜索 
ps4 破解 游戏 Pr 
Imac 27 十 imac21.5 27 
狂 咪 免费 向 养 领养 免费 
猫咪 领养 免费 小 猫 啼 统 状 宠物 狂 
加 菲 猫 领养 
iphonex256g 英 版 国 行 
iphonex 全 原 iphonexr iphonexs 
猫 砂 盆 全 封闭 大 号 封闭 式 
苹果 无 线 键盘 
兰 毕 键 总 


转 转 
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转 转 的 搜索 界面 会 显示 “推荐 搜索 和 “历史 搜索 ， 以 标签 的 形式 来 展示 平台 内 的 热门 
商品 ， 从 而 达到 为 其 他 商品 导 流 的 目的 ， 促 使 平台 内 部 的 流量 分 友 平 衡 。 


4. 沛 选 分 类 

通过 标签 进行 筛选 分 类 能 帮助 用 户 更 加 精准 地 选择 所 需要 的 内 容 。 这 样 用 户 可 以 自主 地 在 
一 定 范 围 内 浏览 自己 感 兴趣 的 内 容 ， 避 免 耗 费 大 量 的 精力 和 时 间 去 浏览 无 天 信息 ， 提 高 了 
用 户 的 阅读 效率 。 以 淘宝 的 评论 区 域 为 例 .: 


按 分 类 看 评价 


© 最 新 ”好 评 (163) 。 中 评 (0) 。 差 评 (1) 


追加 (9) 有 图 [23) 视频 (3) “正品 (3) 


淘宝 


淘宝 的 评论 区 域 通过 算法 将 评论 的 内 容 分 为 几 个 不 同 的 维度 ， 表 通过 标签 的 形式 展现 ， 用 
户 可 以 根据 目 己 的 实际 需求 进行 筛选 ， 浏 贤 自 己 感 兴 趣 的 评论 。 这 样 帮 助 用 户 提高 了 浏览 
的 效率 ， 减 少 了 用 户 在 时 间 、 精 力 上 的 消耗 ， 节 约 了 成 本 。 


5. 填写 评论 

传统 的 评论 区 域 需 要 用 户 填 写 大 量 的 文字 ， 对 于 工具 类 型 的 App 而 言 这 是 一 项 高 成 本 的 
操作 ， 但 是 我 们 可 以 根据 用 户 常 用 的 评论 数据 ， 预 设 成 可 点 击 的 标签 形式 ， 用 户 可 以 根据 
实际 的 情况 进行 选择 关键 词 标签 ， 代 蔡 手 动 录入 评论 。 这 样 减少 了 用 户 操 作 的 交互 路 径 ， 
极 大 地 节约 了 用 户 的 时 间 、 精 力 投 入 。 


例如 ， 日 常生 活 中 我 们 使 用 工具 类 型 的 App 完成 菏 项 操作 任务 之 后 ，App 会 主动 
提示 我 们 进行 评价 ， 这 时 我 们 就 可 以 通过 选择 标签 的 形式 进行 评论 。 这 里 以 滴 滴 出 行 
为 例 : 
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x 评价 


全 广 让 全 


比较 渗 权 , 仍 可 改善 


不 再 坐 该 司机 的 车 加 入 黑 名 单 | 


滴 滴 出 行 


滴 滴 在 完成 行程 和 支付 环节 之 后 ， 会 上 自动 弹出 评价 页 面 ， 而 这 个 时 候 用 户 通 常 是 没有 过 多 
的 精力 去 处 理 这 些 事情 的 。 为 了 提高 用 户 的 评价 数量 ， 滴 滴 将 常用 的 评价 提炼 成 天 键 词 ， 
用 户 可 以 通过 点 击 预 设 的 评价 标签 来 完成 评论 任务 ， 这 样 能 有 效 减 少 用 户 所 要 消耗 的 精 
力 ， 优 化 用 尸体 验 ， 提 高 信息 采集 率 。 


男 重 点 
( 1 ) 标签 是 事物 抽象 出 来 的 定义 ， 方 便 用 户 标记 和 机 器 识别 ， 它 的 主要 特征 是 开放 性 、 
经 量化 、 参 与 性 。 


( 2) 标签 的 主要 作用 是 信息 传递 和 交互 操作 。 标 签 通 过 提炼 的 图 形 或 者 关键 词 进 行 信息 
的 传递 ， 用 户 再 根据 信息 结合 自己 的 实际 需求 进行 交互 操作 。 


( 3) 标签 的 使 用 场景 较为 广泛 ， 主 要 出 现 的 场景 有 : 产品 展示 和 运营 活动 、 模 糊 推 荐 、 
内 容 导 流 、 筛 选 分 类 、 填 写 评 论 。 


参考 资料 
关于 标签 以 及 推荐 的 设计 ? https://dwz.cn/6tOnzi1r 


标签 设计 、 理 查 德 塞 勒 和 Dark Pattern https://dwz.cn/WKL5SOBa 
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10 ”聊天 气泡 框 吊 见 问 题 


文 / 刘 芳 


聊天 客 面 看 似 比 较 简 单 ， 但 是 新 人 往往 会 志 记 给 聊天 气泡 框 做 适 配 ， 最 后 导致 深 地 效果 参 
差 不 齐 ， 增 加 开 上 友和 验收 成 本 。 本 文 主 要 和 大 家 分 享 聊 天 气泡 框 的 常见 问题 和 对 应 的 解决 
方案 。 


新 手 哩 见 问题 


平时 我 们 知道 聊天 气泡 框 会 随 文字 多 少 变 化 ， 宫 高 也 会 随 之 变化 ， 但 是 标注 时 就 容易 忽略 
挥 了 这 个 前 提 ， 将 其 标 成 固定 尺寸 或 者 不 标注 让 技术 目 己 去 写 。 不 管 是 哪 种 情况 ， 都 会 导 
致 后 期 频 每 的 沟通 调试 ， 增 加 开 上 友 的 时 间 。 因 此 蕾 握 正确 可 洲 地 的 适 配 方 法 非 党 重要， 下 
面 结合 实例 分 别 看 看 主要 有 哪些 问题 。 


1. 文字 气泡 框 直接 标注 具体 尺寸 
这 是 新 手 设计 师 常见 的 标注 方法 ， 采 用 该 标注 方式 会 导致 小 屏 手机 展示 不 完全 ， 大 屏 手 机 
展示 又 太空 的 问题 ， 如 下 图 所 示 : 


以 之 前 做 的 医生 问 诊 界 面 来 说 ， 我 直接 将 气泡 框 标注 为 固定 尺寸 520px， 最 后 验收 时 才 发 
现在 iPhone 5 640px 的 屏幕 显示 时 气泡 框 已 经 超出 屏幕 ; 而 在 iPhone 8 Plus 828px 的 
屏幕 显示 时 留 日 又 太 多 ， 导 致 各 机 型 展示 效果 不 统一 。 
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党 您 好 ， 我 是 您 的 主治 医生 : 如 果 您 有 复 
诊 需求 ， 或 者 病情 咨询 ， 可 以 直接 描述 
你 的 症状 ， 我 会 尽快 给 你 回复 ! 


设计 稿 标 注 750px 的 屏幕 


vv 
' 您 好 ， 我 是 您 的 主治 医生 : 如 采 您 有 复 党 您 好 ， 我 是 您 的 主治 医生 : 如果 您 有 有 复 
诊 需 求 ， 或 者 病情 咨询 ， 可 以 直接 描述 诊 需 求 ， 或 者 病情 咨询 ， 可 以 直接 措 述 
你 的 症状 ， 我 会 尽快 给 你 回复 ! 你 的 症状 ， 我 会 尽快 给 你 回复 ! 
20;34 20;34 
iPhone 640px 的 屏幕 iPhone 828px 的 屏幕 


2. 不 同比 例 图 片 ， 气 泡 缩 略 图 均 展 示 方 


在 发 送 图 片 时 会 涉及 不 同比 例 的 图 片 ， 如 果 都 采用 方形 展示 ， 那 么 多 余 的 部 分 就 会 被 隐藏 
掉 ， 采 用 该 适 配 方式 的 问题 是 不 能 将 图 片 信 息 最 大 化 展现 ， 占 用 屏幕 空间 ， 如 下 图 所 示 : 


*eeeo ATST 全 6:18 2 35% 而 


© 这 可 能 是 吃 了 什么 东西 过 敏 了 ， 拉 了 几 
天 了 ， 痔 子 现在 严 不 严重 ， 您 方便 的 话 
可 以 拍 个 照片 我 看 看 


均 以 方 图 展现 
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还 是 以 咨询 医生 这 个 界面 为 例 ， 分 别 上 传 了 横 图 和 坚 图 ， 从 图 可 以 看 到 最 终 的 缩 略 图 效果 
都 是 方 图 ， 这 样 的 展示 方式 对 于 用 户 量 小 的 版 本 使 用 尚 可 ， 但 是 如 果 你 的 App 用 户 量 大 ， 
同时 聊天 界面 使 用 率 高 ， 就 需要 考虑 信息 最 大 化 展现 了 。 


如 何 解 决 


以 上 两 个 问题 都 是 我 第 一 次 做 聊天 界面 时 遇 到 的 ， 通 过 查找 资料 、 对 各 平台 对 比 、 和 技术 
沟通 、 咨 询 设计 前 非 等 方式 ， 我 总 结 了 较为 洲 地 的 适 配 方 案 。 


1. 文字 部 分 一 一 采用 百分比 标注 
由 于 气泡 框 的 宽度 随 着 屏幕 宽度 变化 ， 因 此 采用 百分比 的 标注 方法 ， 可 以 很 好 地 解决 多 设 
备 下 不 统一 的 问题 。 


计算 方式 : 气泡 框 的 最 大 忱 度 (人 A ) / 屏幕 咒 度 (W ) =70%。 根 据 该 公式 ， 我 们 也 能 够 
根据 屏幕 蜗 度 得 到 较为 适合 的 气泡 框 的 设计 尺寸 ， 如 下 图 所 示 : 


| 您 好 ， 我 是 您 的 主治 医生 : 如 果 您 有 复 
诊 需 求 ， 或 者 病情 咨询 ， 可 以 直接 描述 
你 的 症状 ， 我 会 尽快 给 你 回复 ! 


设计 稿 标注 750px 的 屏幕 


vw 
' 您 好 ， 我 是 您 的 主治 医生 : 如 果 4 您 好 ， 我 是 您 的 主治 医生 : 如 果 您 有 各 诊 需 
“W 您 有 复诊 需求 ， 或 者 病情 咨询 ， “1 求 ， 或 者 病情 咨询 ， 可 以 直接 描述 你 的 症 
可 以 直接 描述 你 的 症状 ， 我 会 尽 状 ， 我 会 尽快 给 你 回复 ! 


快 给 你 回复 ! 


2034 


iPhone 640px 的 屏幕 iPhone 828px 的 屏幕 
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采用 百分比 标注 后 ， 适 配 到 iPhone 5 640 x 1136 分 辩 率 的 屏幕 和 iPhone 8 Plus 
1242 x 2208 分 辨 率 的 屏幕 中 就 都 不 会 出 现 显示 不 完全 或 者 留 白 太 多 的 问题 了 。 

注意 : 在 设计 时 百分比 不 是 固定 的 ， 大 家 可 适当 调整 。 例 如 你 的 App 留 白 比 较 多 ， 那 么 这 
个 数值 可 设置 为 65%; 留 白 少 可 设置 为 80% ， 常 规 可 设置 为 70% ， 然 后 再 取 8 的 倍数 即 
可 。 以 750 x 1334 分 辩 率 为 例 进行 设计 ， 气 泡 框 按照 常规 比例 设置 为 70%， 那 么 气泡 框 
的 最 大 宽度 (a)=750 x 70%=525px， 最 后 取 8 的 倍数 为 520px。 


2. 图 片 部 分 一 一 设置 图 片 比例 的 国 值 
聊天 气泡 框 中 的 图 片 一 般 有 正方 形 图 、 横 图 、 竖 图 ， 为 了 最 大 化 地 保留 图 片 长 宽 比 样式 ， 
保证 超 长 图 信息 的 可 识别 性 ， 首 先 需要 确定 图 片 适 配 规则 和 设置 图 片 比例 的 阔 值 。 


1 ) 设置 缩 略 图 尺寸 范围 ， 以 单 边 进行 缩放 

这 是 目前 体验 较 好 的 方案 ， 可 满足 各 比例 图 片 信息 最 大 化 的 展示 。 因 此 ， 大 家 在 设计 时 
首先 需要 确定 缩 略 图 尺寸 范围 。 以 问 医生 的 项 目 为 例 ， 人 在 2 倍 图 下 我 将 其 分 辨 率 设 置 为 
300 x 300( 该 数值 在 保证 展示 效果 的 情况 下 ， 一 屏 可 展示 更 多 的 图 片 )。 


设置 好 缩 略图 尺寸 学 围 后 ， 图 片 如 何 适 配 呢 ? 可 以 通过 将 图 片 最 长 边 适 配 到 缩 略 图 中 ， 然 
后 再 等 比例 缩放 即 可 。 我 分 别 做 了 方 图 、 横 图 、 坚 图 的 适 配 效 果 ， 如 下 图 所 示 : 


站 一 一 一 = 一 一 一 = 一 一 


缩 略图 尺寸 范围 
300x300 


Men- 


方 图 、 模 图 、 坚 图 适 配 到 缩 略 图 效果 
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2 ) 设 定 图 片 适 配 的 阔 值 比例 
在 实际 场景 中 ， 往 往 会 遇 到 特殊 比例 图 片 ( 如 超 长 图 ) ， 将 其 适 配 之 后 就 会 发 现 图 片 所 占 
面积 极 小 ， 不 仅 展 示 效 果 不 佳 ， 同 时 识别 性 也 极 低 ， 如 下 图 所 示 : 


长 图 适 配 占 比 面积 小 ， 识 别 性 低 


因此 在 适 配 时 我 们 还 需要 设置 国 值 ， 什 么 是 国 值 呢 ?9 国 的 意思 是 界限 ， 故 国 值 又 叫 临 界 
值 ， 也 融 是 当 图 片 的 比例 超过 国 值 时 ， 其 缩 略 图 展示 效果 和 国 值 一 致 。 考 虑 到 图 片 的 展示 
效果 和 识别 性 ， 将 3 : 1 作为 国 值 较为 合适 。 


当 图 片 比例 小 于 等 于 3 : 1 时 ， 将 图 片 等 比 缩 放 ， 最 长 边 为 缩 略 图 的 最 大 尺寸 300px， 如 下 


图 所 示 : 


图 片 比例 小 于 等 于 3 : 1 


当 图 片 比例 大 于 3 : 1 时 ， 仍 采用 3 : 1 的 缩 略图 展示 尺寸 ， 多 余部 分 进行 隐藏 ， 从 而 让 图 
片 更 有 识别 性 。 
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FF--—————---------——----- 


图 片 比例 大 于 3 : 1 


以 上 就 是 利用 冰 值 设置 缩 略 图 最 大 尺寸 ， 以 单 边 进行 缩放 的 方法 。 需 要 注意 的 是 ， 当 图 片 
分 辩 率 不 足 300 x 300 时 ， 需 按照 适 配 规则 等 比例 放大 到 300 x 300 后 展示 ， 这 样 当 图 片 过 
小 时 ， 可 以 最 大 化 展示 图 片 信息 ， 如 下 图 所 示 : 


和 
. 
. 
. 
. 
. 
] 
是 
] 
是 
] 
. 
是 
es . 
| 
. 
. 
和. 
下 
cE 


图 片 大 于 300 片 小 于 300 


画 重点 
文字 部 分 : 在 聊天 界面 中 ， 文 字 气 泡 框 适 配 最 好 采用 百分比 的 方式 进行 标注 ， 这 样 能 保证 
各 个 机 型 展示 效果 统一 ， 保 证 项 目 顺利 落地 。 

图 片 部 分 : 图 片 气泡 框 适 配 首先 要 设置 好 缩 略 图 的 取 值 范围 ， 为 了 最 大 化 地 保留 图 片 长 咒 
比 样式 ， 图 片 适 配 采 用 设置 两 边 边 长 的 取 值 范围 ， 以 单 边 进行 缩放 ， 并 设 定好 图 片 适 配 的 
国 值 比例 。 

参考 资料 

聊天 缩 略 图 背后 的 故事 : 你 不 曾 注意 的 那些 细节 http://t.cn/ROH1273 


聊天 产品 的 设计 策略 一 缩 略 图 http://t.cn/E5PlsoG 
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11 图 片 比例 


文 / 刘 芳 


在 设计 时 ， 我 们 会 注意 界面 的 排版 、 文 字 的 对 比 、 图 标 图 片 的 美观 ， 但 是 图 片 比例 却 很 容 
易 被 忽略 。 一 些 设计 师 会 通过 参考 优秀 App 的 尺寸 来 设 定 ， 一 些 设计 师 直 接任 感觉 取 个 数 
值 即 可 ， 并 无 规范 可 言 。 其 实 图 片 企 设计 时 需要 遵循 一 定 的 比例 ， 这 样 会 更 符合 产品 定位 
以 及 方便 后 期 维护 。 本 文 总 结 了 五 种 Ul 中 音 见 的 图 片 比例 。 


图 片 常见 比例 


图 片 比例 3 : 2 


3 : 2 这 个 尺寸 其 实 源 于 135 胶 卷 的 比例 ， 采 用 它 并 不 是 因为 黄金 比例 ， 而 是 由 相机 的 像 场 
大 小 决定 的 。 


36mm 


Wupz 


镜头 成 像 区 域 


135 胶 卷 的 比例 3 : 2 


早期 徕卡 镜头 的 成 像 圈 和 直径 大 约 为 44mm， 而 胺 卷 的 客 是 24mm， 因 此 如 果 在 直径 44mm 
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的 圆 上 截取 一 块 铬 为 24mm 的 长 方形 ， 那 么 边 长 正好 为 36mm， 也 就 是 3 : 2 的 比例 。 同 时 
由 于 徕卡 相机 的 用 户 群 巨大 ， 因 此 其 他 相机 厂商 也 逐渐 将 尺寸 统一 为 3 : 2。 


早期 图 片 大 多 使 用 3 : 2 的 尺寸 ， 但 是 随 着 移动 设备 的 发 展 ， 手 机 很 大 程度 上 蔡 代 单反 成 为 
主流 担 照 设备 ，4 : 3 和 16 : 9 的 图 片 数 量 占 比 退 上 了 传统 摄影 的 3 : 2， 几 乎 与 其 半分 天 
下 。 目 前 我 们 看 到 一 些 租房 、 旅 游 类 App 仍 然 采用 该 比例 ， 例 如 爱 彼 迎 和 携程 。 


新 年 过 节 来 普陀 山 许愿 
热门 目的 地 > 祈福 ， 闪 化 硕 山下 
上 上海 成 部 北京 东京 3:2 痢 陀 山 2 日 路 团 莲 
am 站 路 ”每 岛 
Gt 探寻 隐秘 老 店 ， 品 演 古 早 
用 加 味 小 吃 
wk 厦门 4 日 自由 行 
同 路 | 世 杂 | 诲 与 ”未 委 庙 字 


史 地 文 美 四 堆 课堂 ， 给 孩 
子 深刻 的 苹 学 启蒙 
其 程 局 莹 致 坦 硬 日 季子 塌 


爱 彼 迎 携程 -旅游 


[Ps 1 [pus EDT | 里 
在 法 租界 的 新 中 式 公寓 独 。 由 分 静安 守 附 近 的 花园 洋 | 
享 苑 圳 的 花园 房 探索 租界 生活 讨 

1 每 哆 ¥E 


¥467 每 路 ¥80 
二 诅 直 页 才 32 让 让 去 衣 全 二 第 


爱 役 迎 和 携程 的 图 片 大 多 采用 专业 设备 3 : 2 的 比例 进行 拍摄 ， 因 此 采用 该 比例 可 以 最 大 化 
地 展示 图 片 信 息 ， 便 于 后 期 的 维护 。 


图 片 比例 4 : 3 


4 : 3 是 随 着 小 型 相机 ( 例如 微 单 ) 的 出 现 而 诞生 的 。 受 限于 当时 的 传感器 技术 ， 大 家 要 想 
把 相机 做 得 更 小 ， 就 需要 尽 可 能 地 在 小 体积 上 实现 更 高 的 像素 ， 因 此 大 家 采用 的 方法 就 是 
把 比例 做 得 更 方 。 所 有 几何 图 形 中 ， 对 角 线 距离 越 相近 ， 图 形 越 接近 圆 形 ， 图 片 占 比 面积 
也 就 越 大 。 


镜头 成 像 区 域 镜头 成 像 区 域 


同 像素 下 4 : 3 像 场 更 大 ， 也 就 是 图 片面 积 更 大 
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相 比 于 3 : 2 的 图 像 来 说 ， 这 种 比例 可 展示 的 信息 更 多 ， 目 前 一 些 美 食 和 图 片 类 App 多 采用 
4 : 3 的 比例 ， 例 如 厨房 故事 、in 。 


来 自 世 界 各 地 的 鸡肉 料理 : 猜 猜 我 们 最 爱 是 
哪个 ? 


和 如何 给 你 的 鸡 因 食 语 锡 上 潍 花 


厨房 故事 in 


在 设 定 图 片 比例 时 ， 大 家 可 能 会 纠结 是 选择 4 : 3 还 是 3 : 2 呢 ? 这 里 我 有 一 个 简单 的 方 
法 ， 那 就 是 看 产品 目标 是 以 内 容 为 主 还 是 以 图 片 主 ， 例 如 Nice 和 厨房 故事 。 


默默 内 
准 荐 了 @ 亮 哥 的 归 片 ae 新 食谱 查看 全 部 》 


即使 不 露 真 容 ， 这 位 帅气 的 小 哥 冲 浪 技 术 高 起 ， 毕 竟 这 
姿势 酷 丝 了 ~ 爱尔兰 咖啡 蛋 粒 金 丝 凤 酸 菊 曹 


Nice 厨房 故事 
由 于 Nice 的 产品 目标 是 以 展示 内 容 为 主 ， 因 此 它 的 图 片 采 用 3 : 2 的 方式 ， 其 优势 就 是 在 同 


样 的 模 屏 大 小 中 ， 可 露出 更 多 的 图 片 。 而 厨房 故事 的 产品 目标 是 以 美食 类 的 图 片 为 主 ， 
此 它 的 图 片 采用 4 : 3 的 比例 ， 其 优势 是 单 张 图 片面 积 占 比 大 ， 可 展示 更 多 的 信息 。 


图 片 比例 1 : 1 


1 : 1 是 传统 的 120 胶 片 画 幅 ， 也 叫 中 画幅 ， 因 为 相机 结构 和 其 他 一 些 原因 ， 导 致 了 胶片 
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是 方形 的 ， 一 般 为 60mm x 60mm， 利 用 该 比例 可 以 将 构图 归 整 得 简单 ， 突 出 主 被 摄 体 
的 存在 感 。 


60mm 


镜头 成 像 区 域 


1 : 1 是 传统 的 120 胶 片 画幅 ， 突 出 主 被 摄 体 的 存在 感 


因此 该 比例 多 用 于 需要 突出 主体 的 图 片 ， 例 如 电 商 类 以 图 片 促进 销售 的 App， 以 及 推荐 类 
的 图 片 列表 中 ， 例 如 严 选 、 网 易 云 音乐 。 


【VIP 专 享 】 一周 。 生活 很 苦 ， 需 要 栅 ”这 是 个 准备 做 说 唱 
新 歌 推荐 甜 的 你 的 歌 单 


109 升 大 容量 满 是 全 衣 出 行 71 升 容量 升级 灵活 出 本 
28 十 纯 PC" 铝 框 ”( 非 全 ,,， 24 寸 十 PC" 铝 框 ”( 非 全 . 
~ ¥386 x420 


¥416 x435 
5 


美 说 唱 , 码 对 你 说 一 世 傅 人 人 二 人 


= 内 华语 只 
一 面前 行路 上 的 明灯 锋 说 梦 组 努力 ... 


网 易 云 音乐 


严 选 等 电 商 类 的 App 由 于 图 片 直接 决定 了 用 户 的 点 击 量 ， 因 此 往往 会 采用 1 : 1 的 比例 突出 
商品 主体 从 而 促进 销售 。 网 易 云 音乐 的 首页 推荐 也 是 采用 该 比例 ， 其 优势 是 可 以 展示 更 多 
的 产品 。 


图 片 比例 16 : 9 


根据 人 体 工程 学 的 研究 ， 发 现 人 两 只 眼睛 的 视野 范围 是 16 : 9 的 长 方形 ， 所 以 电视 、 显 示 
器 行业 都 根据 该 比例 来 设计 产品 ，iPhone 5 是 首 款 屏幕 比例 为 16 : 9 的 手机 。 
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iPhone 5 是 首 款 屏幕 比例 为 16 : 9 的 手机 


在 设计 时 ， 图 片 的 尺寸 设 定 和 这 些 担 报 器 材 有 很 大 的 关系 ， 因 此 在 视频 类 的 App 中 大 多 
用 16 : 9 的 比例 ， 例 如 App Store、 腾 讯 视频 。 


微 信 读 书 重 磅 热 播 
热门 小 说 阅读 追 书 神 器 更 新 
页 丰 页 看 三 JI687 


魔兽 世界 魔法 黑 森 林 
一 般 "魔兽 狂潮 " 正 席卷 而 来 。 。” 梅 痢 史 琴 普 强 尼 戴 普 


~ NT 


App Store 腾讯 视频 


App Store 的 快照 页 在 4.7 英 寸 的 手机 (iPhone 6、7、8 ) 上 均 是 采用 16 : 9 的 比例 ， 
这 是 由 于 它们 的 分 辨 率 是 750x1334， 刚 好 是 9 : 16; 腾讯 视频 的 列表 图 片 也 是 采用 该 比 
例 ， 这 主要 是 因为 电影 、 电 视 都 是 采用 该 比例 。 


图 片 比例 3 : 1 


3 : 1 是 聊天 气泡 框 中 图 片 适 配 的 国 值 比例 ， 也 就 是 当 你 发 送 的 图 片 长 宪 比 大 于 3 : 1 时 ， 
其 缩 略 图 的 展示 范围 仍然 是 3 : 1， 多 余部 分 进行 隐藏 ， 从 而 让 图 片 更 有 识别 性 。 
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如 下 图 所 示 ， 我 分 别 上 传 了 4 : 1 的 横 图 和 竖 图 ， 它 们 的 缩 略 图 展示 范围 均 和 3 : 1 一 致 ， 
采用 该 国 值 比例 可 以 保证 超 长 图 适 配 之 后 具有 好 的 识别 性 。 


Fr- 一 一 一 ”一 一 mn 一 一 mm 一 mm 一 一 一 


PP 


图 片 比例 大 于 3 : 1 


微 信 在 适 配 时 就 采用 这 一 比例 。 下 图 是 我 分 别 发 送 3 :2、2 : 1、3 : 1、4 : 1、8 : 1 几 个 
尺寸 时 的 显示 情况 ， 可 以 看 到 从 第 三 张 图 开始 ， 后 面 的 几 个 比例 展示 效果 均 是 3 : 1， 这 样 
可 以 避免 直接 适 配 出 现 一 条 极 细 图 片 的 造 座 。 


省 中国 移动 令 下 午 2:50 @7 面 
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辆 重点 


大 家 在 设计 时 需要 记 住 ， 图 片 比例 在 设 定时 最 好 有 一 定 规律 ， 不 要 随意 地 设置 尺寸 。 
同时 一 个 App 中 图 片 的 比例 不 宜 过 多 ， 最 好 不 要 超过 3 种 ， 类 似 功 能 的 图 片 采 用 同一 
比例 。 


另外 在 确定 采用 哪 种 图 片 比例 时 ， 先 确定 产品 类 型 和 产品 目的 。 如 果 项 目 是 电 商 类 产品 ， 
主要 目的 是 为 了 卖 货 ， 那 么 我 们 就 选择 1 : 1 的 比例 可 以 突出 商品 主体 ; 如 果 你 是 做 视频 类 
的 App， 那 么 你 的 产品 展示 列表 就 可 以 采用 16 : 9 的 比例 。 总 之 ， 在 选择 时 需要 做 到 符合 
产品 定位 、 考 虑 维护 成 本 ， 做 到 有 理 有 据 。 


小 


参考 资料 
既然 16 : 9 这 么 有 大 请 范 ， 过 去 为 什么 用 3 : 2? http://h5ip.cn/iLEA 
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12 关于 卡片 圆 角 的 思考 


文 / 姜 正 


我 们 最 熟悉 的 苹果 公司 使 用 辆 角 卡 片 的 最 早 历 史 可 以 追溯 到 1981 年 ， 当 时 苹果 公司 的 天 
才 程 序 员 Bill Atkinson 正 同 团队 展示 他 是 如 何 用 一 种 聪明 的 方法 在 当时 仅 有 68000 处 
理 器 的 Lisa 和 Macintosh 机 器 上 快速 画 出 加 和 椭圆 。Steve Jobs 看 了 之 后 有 另外 的 想 
法 ， 他 说 : “ 圆 和 椭圆 都 不 错 ， 但 是 能 画 出 带 圆 角 的 四 边 形 吗 ?” 我 们 现在 也 能 画 出 吗 ? 
Bill Atkinson 回答 说 很 难 做 到 ， 而 且 他 认为 并 不 真正 需要 圆 角 四 边 形 。Steve Jobs 就 立 
刻 强 烈 回 应 了 : “到 处 都 是 圆 角 四 边 形 ! 看 看 这 个 房间 周围 就 知道 了 ! ”并 且 他 还 带 着 
Bill Atkinson 出 去 转 看 可 以 碰 到 多 少 圆 角 四 边 形 。 最 后 Bill Atkinson 被 说 服 ， 第 二 天 下 
午 就 拿 出 了 满意 的 结果 。 


手机 工业 设计 趋势 


正如 Steve Jobs 所 说 ， 到 处 都 是 圆 角 四 边 形 。 纵 观 2018 年 各 大 厂商 发 布 的 旗舰 手机 ， 
企 工 业 设计 上 基本 都 采用 了 更 加 柔和 的 圆 角 设计 ， 例 如 iPhone、SAMSUNG 、 小 米 、 
VIVO 等 。 
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屏 晶 设计 同样 选择 了 圆 角 设 计 ， 在 细节 之 处 也 保持 了 高 度 的 统一 ， 例 如 iPhone 人 在 摄像 头 
位 置 的 连接 处 同样 及 用 了 圆 角 弧度 作为 过 渡 。 可 见 圆 角 设计 已 经 在 工业 设计 中 成 为 非常 重 


要 的 设计 语言 。 


手机 系统 U1 设计 趋势 


不 止 是 手机 的 工业 硬件 设计 上 采用 了 大 量 的 辆 角 ， 各 大 厂商 手机 系统 的 UI 也 是 大 量 采 用 
了 圆 角 设计 。 


大 家 最 熟悉 的 可 能 就 是 iOS 系统 里 的 圆 角 设计 ， 目 2007 年 iOS 7 友 布 ，Apple 将 iDS 上 
标志 性 的 圆 角 标 毗 廓 做 了 更 新 ， 将 工业 设计 中 的 曲线 连续 概念 应 用 到 了 视 部 设计 上 ， 并 一 
直 延 续 人 至今， 人 在 iOS 12 中 得 到 全 面 应 用 。 


除了 iOS 系统 ，Android 系统 的 各 大 厂商 也 纷纷 使 用 圆 角 作为 设计 语言 ， 例 如 
SAMSUNG 的 ONE UI 以 及 国内 的 MIUI 10 的 系统 界面 。 
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18611614302 
苯 敬 的 用 户 您 好 , 我 们 已 收 到 您 的 订单 。 


你 的 年 终 总 结 准备 好 了 吗 ? 21 
时 间 总 是 追赶 着 我 们 不 断 前 行 , 2017 年 也 即将 .… 


正在 更 新 应 用 
小 米 应 用 商店 正在 更 新 5 个 应 用 。 


MIUUIL Design 全 员 邮 优 
明天 早上 10:30 在 阶梯 才 室 讨论 相关 问题 


MIUI 


人 眼 处 理 圆 角 更 加 容易 


相对 于 其 他 图 形 ， 人 类 的 眼睛 在 识别 圆 角 弧 形 的 时 候 更 加 容易 。 因 为 人 眼 生理 构造 上 的 中 
央 凹 《是 视网膜 中 视 党 最 敏 锅 的 区 域 ) 在 处 理 圆 形 时 最 快 ， 而 处 理 窍 形 边 缘 时 则 需要 涉及 大 
脑 中 更 多 的 “神经 影像 工具 “。 所 以 ， 人 眼 处 理 圆 角 德 形 更 加 容易 ， 因 为 它们 看 起 来 比 普 
通 和 矩形 更 接近 于 圆 。 


困难 容易 


例如 ，App Store 中 的 Today 页面 ， 每 天 推送 的 内 容 通过 圆 角 的 卡片 设计 呈现 给 用 户 ， 
让 用 户 可 以 快速 识别 当前 模块 。 但 如 果 换 成 直角 的 话 ， 我 们 发 现 相对 于 圆 角 卡片 它 的 识别 
成 本 明显 增加 。 
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本 中 国联 通 倒 下 午 2:22 人 @ 了 79% 凤 )， 4 四 中 国联 通 令 下 午 2:22 @ 了 795 有 ) 


《INSIDE》 : 愿 我 们 《INSIDE》: 愿 我 们 
在 黑暗 的 另 一 边 相 见 在 黑暗 的 另 一 边 相 见 


人 人 


更 多 为 你 推荐 的 故事 更 多 为 你 推荐 的 故事 

带 虚拟 歌 姬 带 虎 拟 歌 媚 

加 有 儿 9 4 os 0 
App Store 


任 实 际 线 上 的 大 多 数 产 品 中 ， 打 开 App 弹出 的 运营 活动 弹 窗 多 为 圆 角 窍 形 ， 因 为 用 户 识 
别 贺 角 窍 形 更 加 容易 ， 如 果 换 成 直角 的 话 则 会 提升 识别 成 本 ， 且 显得 生硬 。 


一 今日 精 选 福利 推荐 ~ 
连续 签到 领取 红包 
! | 


VYv 


七 日 签到 领取 人 元 现金 红包 


马上 参与 


微 博 
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在 巴 罗 的 神经 学 研究 所 完成 的 天 于 “和 角 ” 的 科学 研究 发 现 ， 角 的 凸显 性 感知 与 角 的 度数 呈 
线性 变化 ， 锐 角 比 钝 角 会 产生 更 强 的 虚幻 的 凸显 性 。 换 句 话 说 ， 角 越 锐 利 ， 看 起 来 越 明 
显 ， 视 觉 冲 击 力 越 强 ， 对 周边 环境 产生 影响 越 大 。 而 圆 角 弧 形 则 看 起 来 更 加 柔和 ， 易 于 处 
理 ， 不 会 对 环境 造成 过 多 的 影响 ， 如 下 图 所 示 : 


锋利 的 锐角 圆 疏 形 


例如 西瓜 视频 在 改版 中 ， 将 “锐角 ”的 播放 按钮 改 成 了 “ 圆 角 ”的 播放 按钮 ， 减 少 了 锐角 
对 用 户 的 视 党 影响 ， 使 页 面 整体 更 加 统一 。 


NBA 扣 篮 大 赛 最 近 10 年 的 精华 全 在 这 儿 了 ! NBA 扣 得 大 赛 最 近 10 年 的 精华 全 在 这 儿 了 1! 


(Me 方 .关注 Dw : Me 方 .关注 Dwo : 


改版 前 改版 后 


圆 角 更 加 安全 


圆 角 上 自身 的 图 形 属 性 更 加 柔和 、 和 舒适 ， 给 人 一 种 安全 感 和 杀 密 感 。 而 尖 角 则 给 人 一 种 尖 
饥 、 具 有 攻击 性 的 感 堂 。 我 们 可 以 回忆 一 下 日 单 比较 尖锐 的 物体 ， 例 如 草 刀 、 迎 子 、 和 警示 
牌 等 ， 都 会 给 人 党 来 伤害 或 者 警示 他 人 的 意向 。 
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在 设计 玩具 的 时 候 会 采用 大 量 的 圆 角 设计 ， 来 让 家 长 对 其 放下 戒备 心 ， 让 家 长 觉得 这 是 安 
全 的 ， 可 以 给 孩子 玩 。 试 想 哪 个 家 长 会 给 孩子 一 把 刀 玩 ? 


现在 的 少儿 用 户 群 体 也 在 逐年 增长 ， 针 对 少儿 用 户 ， 由 于 群体 的 特殊 性 ， 少 儿 应 用 App 
中 使 用 了 大 量 的 圆 角 设计 。 例 如 ABC mouse 中 控件 都 使 用 了 大 圆 角 的 设计 ， 首 先是 提 
高 了 页 面 按钮 的 识别 性 ， 其 次 是 圆 角 设计 给 用 户 珊 来 安全 可 靠 的 感觉 ， 让 用 尸 更 加 信赖 
产品 。 
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ABC mouse 


圆 角 使 得 信息 更 易于 处 理 


圆 角 人 在 使 用 地 图 或 图 表 的 场景 中 具有 的 得 天 独 厚 的 优势 ， 圆 角 的 弧度 能 够 更 加 平滑 地 连续 
引导 用 户 的 视线 ， 符 合用 户 的 头 部 与 眼睛 的 目 然 运动 ; 而 锐角 则 会 迫使 用 户 的 视线 进行 强 
制 转折 ， 容 易 造 成 用 户 的 停顿 。 


ro 


例如 北京 的 地 铁 地 图 ， 在 折线 处 大 都 采用 了 圆 角 设计 ， 具 有 很 强 的 引导 性 ， 来 帮助 用 户 快 
速 查询 各 个 地 铁 站 点 。 假 设 换 成 了 和 直角 的 转折 设计 ， 在 本 来 就 嗜 杂 拥挤 的 地 铁 环境 里 ， 乘 
客 将 付出 更 多 的 成 本 去 查看 地 铁 线路 。 
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一 一 一 一 一 一 一 一 一 一 


企 圆 角 德 形 中 ， 由 于 边缘 圆 角 向 内 指向 和 矩 形 中 心 的 感觉 更 加 明显 ， 所 以 使 用 圆 角 卡片 能 更 
加 凸显 卡片 中 央 的 内 容 ， 如 下 图 所 示 : 


~ a 
-一 I 


圆 角 的 指向 性 


当 多 个 卡片 并 排 时 ， 带 圆 角 的 卡片 具有 更 强 的 内 部 指向 性 ， 且 相 邻 的 两 条 绪 差异 化 较 大 ， 
我 们 可 以 清楚 分 辨 它们 的 边界 线 ; 而 同样 大 小 的 直角 和 矩 形 的 内 部 指向 性 较 弱 ， 临 近 的 两 根 
“ 线 ” 更 加 相似 ， 分 辨 起 来 会 相对 困难 一 些 。 


分 辨 困难 容易 分 辨 


104 UI 那些 事 儿 : 新 手 设 计 师 的 成 长 之 路 


例如 App Store 页 面 ， 通 过 简单 的 修改 ， 我 们 再 次 比较 一 下 直角 与 圆 角 企 实际 中 的 应 用 。 
可 以 看 到 ， 在 识别 直角 卡片 的 时 候 我 们 需要 耗费 更 多 的 精力 ， 而 圆 角 卡 片 则 不 会 耗费 过 多 
的 精力 ， 且 由 于 圆 角 的 内 指向 性 ， 圆 角 卡 片 能 够 更 好 地 衬托 卡 的 内 容 。 


will 中 国联 通 全 上 午 8:24 四 了 了 65%f )+ 


更 新 


* 灿 | 中 国联 通 全 上 午 8:24 人 了 6%f )s 


更 新 


等 待 中 全 部 更 新 等 待 中 全 部 更 新 
小 米 商城 -智能 产品 好 .… 小 米 商 城 -智能 产品 好 .… 

本 次 更 新 : 本 次 更 新 : 

- 优化 功能 细节 体验 ， 人 收复 部 分 问题 更 多 -优化 功能 细节 体验 ， 修 复 部 分 问题 更 多 
少数 派 少数 派 

2019 年 4 月 7 日 更 新 2019 年 4 月 7 日 更 新 

- 修复 文章 评论 框 、 闪 退 等 bug 更 多 - 收复 文章 评论 框 、 闪 退 等 bug 更 多 

hs mo a bh | Seen 2 


修复 上 一 更 新 后 发 生 的 频繁 闪 退 问题 (3.2.7) 


修复 上 一 更 新 后 发 生 的 频繁 办 退 问题 (3.2.7) 


【这 一 问题 是 因为 更 新 最 新 的 编译 器 10.2 编 译 导 ” 更 多 【这 一 问题 是 因为 更 新 最 新 的 编译 器 10.2 编 译 导 ” 更 多 


A etm BA hh ek Meta PD bh bh fn an 
U 3 之 Pa 国 3 入 
Today 薄 戏 App 更 狐 闪 索 Today 游 观 App 更 新 搜索 


App Store 


通栏 式 卡片 与 圆 角 卡片 


卡片 设计 已 经 成 为 最 常用 的 设计 语言 之 一 。 最 后 本 文 从 空间 利用 率 、 视 党 识别 性 、 沉 浸 感 三 个 
维度 来 对 比 一 下 通栏 式 卡 片 和 圆 角 卡片 的 区 别 ， 总 结 一 下 圆 角 卡片 的 优 缺 点 。 


1. 空间 利用 率 

通栏 式 卡片 比 圆 角 卡片 的 空间 利用 率 高 ， 同 等 情况 下 通栏 式 卡 片 可 承载 更 多 内 容 。 圆 角 卡 
片 需要 在 规 范 好 的 内 容 区 之 内 ， 卡 片 的 内 容 与 卡片 边缘 还 需要 一 定 的 间 隅 距离 ， 导 致 了 内 
容 区 域 的 缩小 ， 而 通栏 卡片 则 没有 这 样 的 烦恼 。 
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2. 视 营 识别 性 


圆 角 卡 片 比 通栏 式 卡片 的 视觉 识 别 性 更 加 突出 ， 因 为 人 眼 识别 圆 角 和 窍 形 比 识别 直角 和 矩 形 更 加 
容易 ， 所 以 需要 突出 内 容 的 时 候 首 选 圆 角 卡 片 。 例 如 ， 产 品 中 穿插 的 运营 Banner 设计 基本 
都 会 选用 圆 角 卡片 的 形式 ， 下 图 左 侧 直角 卡片 的 识别 性 就 相对 较 弱 。 


淘宝 
3. 沉浸 感 


通栏 式 卡 片 比 圆 角 卡片 的 沉浸 感 更 强 ， 因 为 圆 角 更 容易 被 识别 ， 而 直角 则 不 容易 被 察觉 。 常 用 
App 中 的 Feed 流 几乎 都 是 通栏 式 卡 片 ， 例 如 same 和 豆瓣 。 


无 SN 卡 令 下 午 3:10 全 好 要 14%f 


《 小 众 衣着 。 关注 地 


图 4 可 捅 新 片 


你 想 看 的 《精灵 旅社 3: 锯 竹 假期 》 有 
新 的 播放 资源 了 ( 查看 昆 片 


真 页 页 责 页 民 7 


入 你 想 看 的 《工作 细胞 》 有 新 的 播放 资 _ _ 
Cs 源 了 .查看 影片 ， 
丰 责 页 真 坟 9.0 | 


a 
说 


开 嘲 讽 好 开心 哦 。 最 近 不 太 上 豆 状 ， 夸 PW 
以 及 写 原创 文 到 错 迷 2333 


由。 口 包 


+ 

说 

别 天 天 觉得 自己 男女 平等 超过 日 本 就 

天 ， 和 拜托 ， 你 咋 不 和 日 本 比 设计 啊 ? 

年 级 倒数 比 ， 比 嘉 了 还 要 奖励 你 是 不 是 呀 。 
Ea 到 ES 首 


首页 书 影 赣 小 担 市 后 我 的 


same 豆 闪 
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因为 圆 角 希望 你 能 够 快速 识别 卡片 上 的 内 容 ， 并 能 够 与 周围 的 元 素 有 所 区 分 ， 强 调 卡 片 
内 的 内 容 ， 所 以 圆 角 卡片 常常 打 断 用 户 的 沉浸 感 ， 目 的 性 更 强 一 些 。 例 如 京东 和 淘宝 的 
个 人 页 面 ， 各 模块 均 使 用 圆 角 卡片 ， 能 够 更 好 地 区 分 业务 组 和 促进 用 户 聚焦 当前 的 业务 


操作 。 


wk 设置 淘宝 昵称 
SY 
214 7 830 


成 藏 夹 笑 注 店铺 开通 | 
88 共 级 全 只 花 小 积分 兑 大 权益 
= rp es ED 
情 付 款 和 情 必 挨 往 评 价 退 接 /售后 ”和 列 的 洒 音 
我 的 订单 吾 看 全 
230 0 0.00” 0.00 ”已 
区 让 和 叶 昌 
吕 优惠 产 [E34 金黄 我 的 钱 名 
全 品 美 立 减 4 高 : 得 付款 矢 发 货 往 忠 偶 评价 角球 / 集 局 
最 重 物 沪 )2-17 
6 1 0 3 号 回忆 签收 
签收 ， 等 收 人 赁 取 货 码 答 收 。 夸 考 使 用 海 
贾 品 关注 倘 鳃 关注 喜欢 的 内 容 六 贤 记 录 
pp) SS (| © 必 备 工具 相 看 全 部 工具 > 
我 的 活动 客户 胆 芳 琳 件 服务 充 东 超市 人 
PLUS 会 员 专 享 . 野生 小 伙伴 。 领 券 中 心 闲置 换钱 客服 小 富 
中 动态 ; PLUS 会 员 360 元 /年 运费 辩 
ada "| © 加 多 
A 8 © 吉 只 NH HM EH oo & 
首页 分 类 发 现 La 我 的 首要 次 入 清和 并 购 邯 车 我 的 向 
ae 
京东 淘宝 


EE 


( 1 ) 从 手机 的 工业 硬件 设计 到 内 置 系统 的 UI 界面 设计 ， 都 采用 了 大 量 的 圆 角 ， 佐 证 了 圆 
角 设 计 已 经 成 为 主要 的 设计 趋势 。 


(2) 人 眼 在 处 理 和 识别 圆 角 图 形 的 时 候 更 加 快捷 方便 ， 而 处 理 铝 角 的 成 本 较 高 ， 且 锐角 
对 周边 的 环境 影响 较 大 ; 圆 角 给 人 的 感 党 更 加 安全 且 具 有 杀 密 性 ， 而 锐角 则 给 人 一 种 尖锐 
感 ， 具 有 一 定 的 攻击 性 。 


(3) 本 角 的 可 座 符合 人 眼 和 头 部 的 自然 运 动 ， 具 有 良好 的 引导 性 ; 在 卡片 中 能 够 清晰 区 
卡片 的 边界 ; 圆 角 具有 优秀 的 内 指向 性 ， 可 以 更 加 凸显 卡片 中 的 内 容 信息 


(4 ) 在 通栏 式 卡片 和 圆 角 卡片 的 对 比 中 我 们 可 以 发 现 : 通栏 式 卡 片 利用 空间 更 加 充 
分 ， 而 圆 角 卡片 的 识别 性 更 好 ; 通栏 卡片 的 沉浸 感 较 强 ， 但 圆 角 卡 片 更 加 能 够 突出 当 


前 的 内 容 。 
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册 


考 资 料 
Material Design 2 来 了 ? 比 圆 更 圆 ， 圆 了 又 圆 https://dwz.cn/AcFjJw0Oy 


从 图 标 转角 论 亲 和 力 的 差异 【 合 图 标 教程 】 https://dwz.cn/BYdmeGc3 

无 框 界面 https://dwz.cn/W7RGIbC5 

浅 析 圆 角 特征 在 产品 设计 中 的 应 用 http:/www.doc88.com/p-9592118891884.html 
从 圆 角 到 圆 角 https://dwz.cn/EvHt3SLG 


西瓜 视频 3.0 改 版 总 结 https://dwz.cn/db7KXKMH 
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01 ”一 伍 图 标的 诞生 


文 / 付 钼 更 


图 标 一 直 都 是 移动 端 界面 中 的 亮点 之 一 ， 图 标 风 格 的 准确 性 ， 取 决 于 我 们 对 产品 属性 的 认 
知 。 产 品 中 好 的 图 标 不 是 独树一帜 ， 而 是 要 融入 整体 ， 给 用 户 舒 服 的 感觉。 


多 数 人 的 误区 


目前 很 多 设计 师 走 进 一 个 误区 ， 莫 名 觉得 自己 不 会 画图 标 ( 动手 能 力 不 足 ) ， 其 实 是 思 
束缚 了 目 己 。 图 标的 难点 不 侍 于 动手 画 ， 而 是 侍 于 画图 标的 思路 和 总 结 的 过 程 。 要 学 会 挑 
选 不 同 的 参考 ， 揉 雁 之 后 融合 到 你 上 自己 的 图 标 中 ， 这 样 才能 做 出 有 创意 的 新 图 标 。 


图 标 设 计 流 程 


第 一 步 ” 找 参考 风格 
根据 产品 定位 去 素材 库 或 者 各 大 设计 网 站 选择 合适 的 参考 图 标 。 如 下 图 所 示 ， 最 终 选 中 了 
两 种 粗 线 型 的 图 标 风 格 作为 这 次 图 标的 原型 参考 。 


OG © S 


单机 新 游 论坛 


第 一 组 图 标 参 考 


O > DD OO 4 


movie read city music 


第 二 组 图 标 参 考 


第 二 步 ” 总结 设计 规范 
整理 每 组 参考 图 标的 设计 规范 ， 这 一 步 很 关键 。 我 们 需要 罗列 出 两 组 图 标的 属性 。 


回电 G © 总 


论坛 


第 一 组 图 标 参考 


第 一 组 : 线 锅 为 9 像素 ， 直 角 ， 内 部 加 有 不 同 的 元 素 ， 每 个 图 标 一 种 颜色 ， 线 条 与 线条 连 
接 ， 实 色 。 


QO > DD OQ 4 


movie read city music 


第 二 组 图 标 参考 


第 二 组 : 线 视 为 12 像 素 ， 圆 角 ， 内 部 无 其 他 无 素 ， 每 个 图 标 合 多 种 颜色 ， 线 条 与 线条 重 
十 ， 半 透明 色 。 


第 三 步 ” 确定 产品 属性 

通过 跟踪 目标 用 户 以 及 产品 属性 确定 图 标 风 格 。 以 下 图 为 例 ， 总 结 的 产品 风格 为 游戏 性 、 
可 爱 、 圆 角 为 主 、 色 彩 丰 富 。 在 多 数 情况 下 拿 到 原型 图 时 就 已 经 明确 了 产品 的 风格 走向 ， 
所 以 第 三 步 的 确定 产品 属性 和 第 一 步 的 找 参 考 风 格 可 以 同步 进行 。 


效果 图 案例 


了 过 
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第 四 步 ”提炼 

根据 上 自身 的 产品 属性 ， 挑 选 上 面 两 组 图 标的 特点 作为 自己 的 图 标的 设计 属性 ， 选 择 思 路 
如 下 : 

( 1) 由 于 界面 本 身 以 圆 角 为 主 ， 所 以 宫 不 犹豫 地 也 选择 了 第 二 组 的 圆 角 


(2 ) 第 一 组 颜色 过 于 单一 ， 游 戏 风 格 不 够 强烈 ; 第 二 组 颜色 过 多 ， 放 在 原本 颜色 丰富 的 
界面 中 会 显得 凌 想 。 最 终 融 合 了 两 组 的 颜色 特点 ， 确 定 图 标 为 两 种 颜色 ， 且 两 种 颜色 为 近 
似 色 ， 这 样 图 标 既 不 会 过 于 单调 ， 又 不 会 太 化 ; 


( 3 ) 选择 图 标 细 节 、 线 觉 ， 我 选择 了 第 一 组 。 考 虑 到 图 标 内 部 会 加 入 一 些 其 他 元 素 ， 不 
会 像 第 二 组 图 标 内 部 没有 其 他 元 素 ， 线 太 粗 会 影响 里 面 细节 的 展示 ; 


(4 ) 选择 特性 ， 我 很 喜欢 第 二 组 图 标的 重 苹 感 ， 增 加 了 图 标的 细节 ， 所 以 我 选择 它 作 为 
我 的 图 标 特 色 。 


多 
Tn 
圆 角 颜色 线 宽 9 像 素 重 彼 
提炼 参考 要 素 


第 五 步 ” 图 标的 基本 原型 
一 个 常常 被 忽略 的 重点 就 是 找 原型 参考 。 举 个 例子 ， 我 们 要 做 第 一 组 的 第 一 个 单机 图 
标 ， 怎 么 找 呢 ? 我 通常 会 去 阿里 巴巴 的 矢量 图 标 库 搜索 相关 的 图 标 原 型 ， 选 出 至 少 5 个 好 
看 的 图 标 作 为 原型 参考 。 


由 © 6 


参考 1 参考 2 参考 3 参考 4 参考 5 
原型 图 标 参 考 
因为 是 单机 游戏 ， 所 以 要 找到 符合 单机 游戏 特点 的 样式 。 最 终 我 选择 了 “参考 2 ”为 我 


的 基本 图 标 造 型 。 找 图 标的 原型 参考 时 一 定 要 拓 咒 思路 ， 很 多 读者 总 是 想 着 做 线性 图 
标 就 找 线性 的 ， 其 他 风格 的 完全 不 看 ， 这 样 会 损失 很 多 好 的 图 标 造型 。 


第 六 步 ” 融合 
最 后 一 步 融 合 也 是 最 简单 的 事情 ， 完 全 就 是 熟 能 生 巧 的 软件 运用 了 。 只 要 平时 多 练习 画图 
标 ， 这 一 步 就 非常 简单 ， 下 图 是 结合 的 过 程 。 


四 ©® © © 


原型 圆 角 线 宽 9 像素 颗 色 重 和 
图 标的 进化 


得 到 了 最 终 融 合 后 的 样式 ， 就 算是 大 功 告 成 了 。 如 果 还 想 让 目 己 的 图 标 和 原型 相差 多 些 的 
话 ， 可 以 改变 一 些 细节 的 处 理 。 最 后 放 上 五 个 图 标的 完成 品 。 


四 四 已 日 邓 


必 玩 动漫 


原型 图 标 参 考 


EE 


( 1) 多 数 人 的 误区 : 觉得 图 标 难 画 。 但 其 实 难点 在 画图 标的 思路 和 总 结 的 过 程 。 


(2 ) 图 标 设 计 流 程 : 第 一 步 ， 根 据 产品 定位 找 参 考 ; 第 二 步 ， 总 结 并 确定 参考 的 设计 规 
范 ; 第 三 步 ， 确 定 产品 的 属性 ; 第 四 步 ， 提 炼 参考 图 标 中 的 特点 ; 第 五 步 ， 查 找 图 标的 基 
本 原型 ( 与 第 一 步 有 所 区 别 的 是 所 找 参考 为 基本 图 形 ， 不 需要 过 多 的 创新 ) ; 第 六 步 ， 将 
上 面 所 总 结 的 特点 与 最 后 选 定 的 原型 图 标 相 融 合 。 


无 论 是 图 标 还 是 界面 ， 做 设计 的 过 程 中 ， 我 们 需要 不 断 地 收集 素材 进行 总 结 ， 寻 找 灵 感 和 
创意 。 对 他 人 作品 的 优点 给 予 天 注 ， 仔 细 撕 摩 作 者 的 思维 方式 、 创 作 理 念 ， 而 不 是 照 着 原 
作品 去 努力 使 自己 的 作品 达到 同样 的 效果 。 加 入 目 己 的 思考 和 尝试 ， 才 会 有 更 好 的 效果 。 
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02 ”手把手 教 你 制作 设计 规范 


互联 网 时 代 产 品 迭 代 速 度 日 益 提 高 ， 设 计 师 再 也 不 像 之 前 那样 ， 可 以 单打 独 斗 地 去 完成 一 
个 项 目 ， 更 多 的 是 需要 团队 的 配合 。 而 不 同 的 人 做 同一 个 项 目的 时 候 ， 就 需要 有 一 个 基本 
规范 ， 这 样 才能 把 控 最 终 输出 的 结果 。 本 文 要 讲 的 就 是 如 何 制作 一 份 高 效 且 能 真正 落地 的 
钢 完 规 沁 。 


新 手 的 困惑 


记得 刚 开 始 工 作 的 时 候 ， 负 责 过 一 个 全 新 的 项 目 。 由 于 团队 也 只 有 我 一 个 设计 师 , 经 常 出 
现 这 样 的 情况 : 开 上 友 者 要 改 一 个 参数 的 时 候 ， 总 是 习惯 性 地 直接 问 我 这 个 地 方 是 什么 颜 
色 、 主 色调 是 什么 、 图 标 是 多 大 、 分 割 线 的 颜色 是 什么 …… 


那 时 候 潜 意识 就 党 得 这 些 东西 是 需要 有 个 规范 文档 的 , 把 一 些 常 用 的 内 容 , 例如 色 值 、 字 
号 、 按 钮 、 图 标 、 上 间距 等 都 放 在 一 起 , 团队 成 员 在 有 需要 的 时 候 能 够 快速 找到 。 


于 是 束 上 网 搜 了 很 多 别人 做 的 设计 规范 , 目 己 依 硝 访 画 靳 做 了 一 份 , 满心 欢喜 地 给 到 开 
发 者 的 时 候 , 却 被 告知 很 多 东西 都 派 不 上 用 场 。 例 如 字体 规范 里 写 的 “一 级 标题 ， 每 
个 人 所 认为 的 一 级 标题 是 不 一 样 的 , 所 以 光 写 一 级 标题 的 话 , 别人 也 不 知道 具体 指 的 是 
哪里 。 


颜色 字号 使 用 场景 
加 #000000 32px 重要 内 容 一 级 标题 
加 #666666 24pX 提示 性 文字 


国 | #FF8900 24px 文字 点 击 状态 


第 2 章 ”能 力 效率 提升 


再 例如 图 片区 域 , 规范 得 太 死 了 , 根本 没 留 适 配 的 空间 , 就 像 个 标注 , 但 其 实现 在 看 来 作为 标 
注 也 是 不 合格 的 。 


750 px 


350 px 


A HAPPY CHANYEOL DAYI! 


头 部 Banner 图 尺寸 标注 样式 


结局 就 是 , 伦 了 很 长 时 间 做 的 规范 从 十 目 路 , 实际 上 对 于 团队 来 说 一 点 作用 都 没有 。 事 后 我 
一 直 在 想 什么 样 的 规范 是 适合 小 公司 的 呢 ? 什么 样 的 规范 又 能 够 真正 节省 团队 时 | 间 、 提 高 
工作 效率 呢 ? 


而 现在 工作 了 几 年 之 后 , 对 这 些 有 了 更 多 的 理解 ， 所 以 就 想 把 这 些 都 总 结 记录 一 下 ， 就 算 
瑟 给 刚 工作 时 候 的 自己。 当然 也 希望 在 写 给 自己 的 同时 也 能 够 帮助 更 多 读者 , 节省 一 些 踩 
坑 的 时 间 。 


关于 设计 规 沁 


人 在 说 具体 怎么 做 规范 之 前 , 我 想 先 就 规范 本 身 的 意义 来 进行 说 明 , 讲 一 下 为 什么 需要 做 规 
范 , 以 及 什么 样 的 规范 才 是 好 的 , 知 其 然 知 其 所 以 然 。 


1. 为 什么 要 做 规 沁 


很 多 在 小 公司 的 设计 师 都 党 得 , 整个 公司 只 有 上 自己 一 个 设计 师 , 所 有 的 设计 稿 都 是 自己 一 个 
人 做 的 , 风格 肯定 都 是 统一 的 , 所 以 没 必 要 和 伦 那 么 长 时 间 去 做 一 个 没有 用 的 东西 。 


但 其 实 规范 本 身 并 不 是 只 给 设计 师 用 的 , 它 更 大 的 作用 是 服务 于 整个 团队 , 例如 方便 和 开发 
者 之 则 的 沟通 , 帮助 他 们 制作 统一 的 组 件 , 以 后 用 到 的 时 候 直 接 调 用 。 
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而 对 于 设计 师 来 说 , 也 不 用 重复 作 图 、 重 复 标 注 , 改动 一 个 模块 的 时 候 就 能 同步 改动 所 有 ， 
大 大 提高 了 工作 效率 。 


组 件 库 页 面 1 页 面 2 


而 且 有 时 候 融 算 设 计 稿 是 同一 个 人 的 ， 也 很 难保 证 前 后 界面 的 参数 是 一 致 的 ， 毕 竟 人 的 精 
力 有 限 , 事情 多 的 时 候 , 很 容易 出 现 记忆 偏差 。 


可 能 你 在 前 面 颜色 、 图 标 、 模 块 间距 做 的 是 这 样 的 ， 到 后 面相 同 模块 的 时 候 , 就 会 做 成 另 
外 一 个 样子 。 这 种 小 问题 到 后 面 再 去 修改 不 但 浪费 时 间 , 还 容易 遗漏 ， 而 前 期 化 时 间 定 义 
好 规则 ， 整 理 好 规范 , 能 够 有 效 避 免 这 个 问题 , 磨 刀 不 误 砍 柴 工 。 


模块 间距 24 


2. 什么 样 的 规 沁 才 是 好 的 

一 个 好 的 规范 , 首先 得 有 人 愿意 用 , 否则 你 做 得 再 好 也 都 白费 了 。 来 换 位 思考 一 下 , 如 果 你 
是 使 用 者 , 你 希望 看 到 一 个 什么 样 的 规范 文档 ? 

对 于 我 而 言 , 最 重要 的 不 是 它 做 得 多 么 细致 、 多 么 完美 , 而 是 我 看 得 懂 , 我 能 够 在 30 秒 
内 找到 自己 想 要 的 东西 , 并 且 能 够 对 当前 的 工作 有 帮助 。 所 以 说 规范 要 简单 易 懂 且 有 指 


导 意 义 。 
3. 需要 注意 的 地 方 


( 1 ) 规范 最 好 是 当主 要 界面 的 设计 完成 之 后 ， 再 来 制作 ， 切 记 不 要 一 开始 就 着 手 制作 规 
范 ， 这 样 很 容易 出 现 前 期 制定 的 规范 在 后 续 的 页 面 上 沿用 不 了 的 情况 。 我 一 般 是 把 每 个 
Tab 的 一 级 页 面 再 加 上 几 个 二 级 、 三 级 页 面 都 做 好 之 后 再 开始 ; 


(2 ) 不 要 因为 规范 而 限制 了 自己 的 思维 , 当 发 现 规范 有 问题 的 时 候 , 要 及 时 去 修正 , 而 不 是 
做 了 一 次 之 后 , 一 直 治 用 , 永 不 修改 ; 


(3) 规范 要 “因地制宜 ， 切 实 可 行 , 不 要 流 于 形式 。 


哪些 规 泄 需要 优先 确定 


1. 设计 图 尺寸 

虽说 现在 大 多 数 人 都 是 以 750 像素 (2 倍率 ) 为 设计 稿 , 但 也 还 是 有 人 在 用 720 像素 (2 倍率 ) 
的 尺寸 , 或 是 375 像素 (1 倍率 ) 的 尺寸 。 所 以 设计 之 初 要 定 一 个 统一 的 设计 尺寸 , 特别 是 多 
个 设计 师 合作 的 时 候 , 干 万 不 要 想当然 地 以 为 别人 都 和 你 一 样 。 
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@2x 


@2x 750x1334 
720x1280 


@1x 
375X667 


2. 间距 大 小 \ 

间距 包括 页 边 距 、 模 块 与 模块 的 间距 , 这 种 全 局 的 间距 大 小 必须 要 一 致 。 页 边 距 的 大 小 很 
好 定 , 基本 上 以 20px、24px、32px 居 多 , 根据 产品 特性 定 一 个 统一 的 就 好 。 如 果 不 知 道 怎 
么 定 ， 可 以 多 去 看 看 大 厂 或 者 同类 型 产品 的 规范 ， 尽 量 不 要 赁 感觉 定 。 


而 模块 与 模块 的 间距 就 相对 复杂 一 点 , 在 定之 前 需要 先 确定 模块 之 间 的 分 割 方式 , 是 用 线 、 
面 还 是 留 日 , 然后 再 确定 间距 。 


线 分 割 面 分 割 


确定 好 模块 与 模块 的 分 割 方式 后 ， 还 需要 确定 模块 内 部 的 分 割 方式 ， 确 定之 后 就 要 严格 执 
行 。 例 如 规范 定 的 模块 与 模块 用 线 ， 模 块 内 部 用 留 日 ， 那 后 续 所 有 页 面 都 需要 按照 这 个 规 
则 来 〈 特殊 情况 可 不 受 此 限制 ) 。 


3. 颜色 


颜色 包括 基础 标准 色 ( 主 色 ) 、 基 础 文字 色 , 还 包括 全 局 标准 色 〈 背景 色 、 分 割 线 色 值 
等 ) ， 这 些 都 需要 标 好 色 值 以 及 使 用 的 场景 。 


基础 标准 色 基础 文字 色 全 局 标准 色 

© © #FS5F5FS #FS5F7FA 
s* 品牌 色 。Feed 正文 、 标 题 。 上 下 导航 栏 分 割 线 。 背景 色 
。 全 局 Button 。 输入 框 填充 

* 文字 链接 


当 颜 色 是 渐变 的 时 候 , 也 需要 标清 楚 渐 变 的 颜色 。 
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4. 字体 


不 需要 把 页 面 所 有 的 字号 都 放 到 规范 里 , 只 需要 把 常用 的 字号 及 其 所 使 用 的 场景 写 清楚 就 
好 。 需 要 注意 的 是 ， 使 用 场景 要 写 一 些 带 有 明确 指向 的 描述 文字 ， 例 如 顶 导航 标题 字号 、 
Feed 流 正文 、 详 情 页 标题 等 。 


样式 字号 使 用 场景 

橙子 的 橙子 32px 详情 页 标题 (加 粗 ) 

橙子 的 橙子 24px Feed 标题 

框 子 的 框 子 24px 用 户 昵称 & Feed 操作 栏 文字 


还 有 一 点 也 不 能 筷 记 ， 那 就 是 行 间 距 ， 不 管 是 一 行文 字 还 是 多 行文 字 ， 我 们 都 需要 标清 行 
上 间距， 也 就 是 行 高 ， 如 果 是 段 党 的 话 还 需要 标注 段 溢 间距 。 


字号 28px 
行 高 40px 
段落 间距 20px 


为 了 避免 团队 的 其 他 成 员 忽 略 了 文字 的 行 司 距 ， 我 们 需要 在 做 规范 的 时 候 标 明 ， 所 有 文字 
必须 注 明 行 间距 。 


5. 图 标 
项 目 紧急 而 人 员 又 不 足 的 时 候 , 可 能 没有 那么 多 时 间 去 把 所 有 图 标 都 画 得 精细 ， 那 这 个 时 


候 我 们 可 以 先 定 尺 寸 。 当 然 这 里 说 的 “ 定 尺 寸 ” 不 是 让 你 把 页 面 内 所 有 图 标的 尺寸 都 定 
好 ， 而 是 说 优先 定 几 个 大 模块 的 尺寸 ， 例 如 顶 导航 、 底 导航 、 个 人 中 心 等 。 


等 后 续 空 | 闪 的 时 候 我 们 再 去 细 化 这 些 图 标 ， 开 发 者 也 只 需要 换 张 图 , 不 影响 其 他 。 建 议 图 
标尺 寸 尽 量 不 要 过 多 ， 例 如 32px、36px、40px、48px 都 有 , 这样 会 显得 凌乱 无 序 , 而 且 
这 些 完全 可 以 统一 成 两 个 标准 , 例如 32px、48px 的 ， 因 为 图 标 是 可 以 有 留 白 区 域 的 , 也 就 
说 图 标本 身 大 小 可 以 是 40px, 但 是 切 图 尺寸 是 48px。 


: t 、 
og / go | 四 图 尺寸 
I 图 标尺 十 


这 样 做 的 好 处 就 是 图 标 大 小 种 类 较 少 ， 方 便 记 忆 也 显得 专业 ， 毕竟 谁 也 不 希望 最 后 整理 出 
来 的 规范 里 有 32px 的 图 标 2 个 、36px 的 图 标 2 个 、40px 的 图 标 2 个 , 这 样 并 没有 提高 效率 ， 
所 以 建议 图 标尺 寸 不 要 太 多 。 


6. 按钮 
按钮 规范 包括 它 的 大 小 、 色 值 、 圆 角度 以 及 默认 状态 、 氮 击 状 态 、 禁 用 状态 。 


按钮 H: 88px W: 600px / 距离 屏幕 左右 各 60px 


Normal (默认 ) 登录 
F: 32px 
C: #FFFFFF 
Press (点 击 ) 登录 


丢 加 遮 置 层 #000000 不 透明 度 20% 


上 替 加 遍 罩 层 #FFFFFF 不 透明 度 50% 
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前 期 在 制定 规范 的 时 候 , 我 们 可 以 先 定 大 、 中 、 小 三 个 尺寸 的 按钮 样式 , 后 期 再 根据 实际 情 


况 做 修改 。 


如 果 你 的 App 内 很 多 按钮 都 是 文字 + 图 标的 , 那么 图 标的 大 小 以 及 它 和 文字 之 间 的 距离 也 


是 需要 规范 的 。 
十 新 建 地 址 
7. 图 片 


图 片 包括 App 内 出 现 的 所 有 图 , 一 般 情况 下 都 是 产品 图 和 头像 。 需 要 注意 在 制定 规范 之 前 ， 
要 先 把 图 片 比例 定好 , 常见 的 比例 有 1 : 1、2 : 1、4 : 3、16 : 9 等 。 然 后 再 把 每 个 模块 所 
用 的 图 片 大 小 以 及 它 的 比例 标清 楚 , 如 果 图 片 有 圆 角 的 话 也 需要 注 明 。 


图 片 圆 角 10px 
200x112 250x140 326x184 
订单 列表 详情 页 礼包 详情 页 商品 大 图 产品 列表 页 


头像 的 尺寸 可 以 定 三 个 ， 大 中 小 各 一 个 ， 基 本 体 量 小 的 App 都 够 用 了 。 建 议 App 内 的 图 片 
比例 有 2 ~ 3 个 就 好 , 因为 这 涉及 后 台 上 传 , 比例 不 一 样 的 话 , 要 么 就 需要 开发 者 对 图 片 进行 坊 
剪 ， 要 么 就 斋 要 留 不 同 的 接口 , 后 期 分 别 上 传 。 无 论 哪 一 种 , 都 是 需要 额外 的 人 力 成 本 。 


aa 寺 


64x64 100x100 140x140 
评论 头像 列表 头像 个 人 中 心头 像 


8. 导航 


1 ) 顶 导航 


规范 内 容 包 括 高 度 、 字 体 大 小 、 颜 色 ， 以 及 有 没有 分 割 线 , 有 的 话 也 要 标明 分 割 线 色 值 ; 


市 不 市 图 标 、 多 个 图 标的 间距 等 。 


2 ) 底 导 航 


导航 : 顶 导航 高 88px 背景 #FFFFFF 顶 导航 分 割 线 色 值 : #te9e9e9 


一 级 页 面 顶 导航 (4 个 底 tab) #333333 

eeeeo0 4G 全 4:21 PM 站 22% 面 ， 
24 一 40 32 24 
56 一 级 页 面 标 题 36px 


规范 内 容 基 本 同 顶 导航 类 似 。 要 区 分 文字 默认 和 选中 两 种 状态 的 色 值 。 


3 ) 二 级 导航 


主要 是 一 些 馆 选 类 Tab,， 需要 标明 文字 大 小 、 色 值 、 选 中 后 的 模 线 大 小 , 这 里 横 线 的 样式 目 
前 常见 的 有 两 种 , 一 种 是 固定 的 短线 , 不 管 上 面 文字 多 少 , 都 是 显示 一 样 的 短线 ; 还 有 一 种 是 


底部 导航 屏幕 均 分 文字 默认 22px #99999 选中 #FF5339 


得 号 只 


卡 券 商城 我 的 
二 全 和 皇 
卡 券 商城 我 的 


和 文字 一 样 长 的 , 无 论 哪 一 种 , 事先 都 需要 定义 一 下 。 


筛选 类 tab 屏幕 均 分 文字 默认 28px #999999 选中 #333333 


28px 文案 文案 文案 ”我 是 文案 
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9. 卡片 相关 

卡片 包括 很 多 模块 , 例如 卡片 标题 、 卡 片 列表 、 卡 片 基 础 样式 , 建议 以 高 度 为 划分 , 如 果 内 
容 差 不 多 的 话 , 就 统一 高 度 。 例 如 都 是 图 标 + 文 字 ， 一 个 高 度 是 72px， 一 个 是 80px， 就 可 
以 统一 成 一 个 。 


Card Title 卡片 标题 


H:80px Font:26px #3933333 


图 标 + 文 字 + 图 标 


so 有 4 


产品 列表 等 一 些 可 复 用 的 卡片 样式 都 可 以 做 到 规范 里 ， 统 一 样式 ， 后 期 修改 起 来 也 比较 
方便 。 


Card Content 基本 卡片 样式 Card 间 距 : 20px 


产品 | 列表 


iceqdsgn 
腔 苛 黄平 


双 球 水 沙 凌 


滴 滴 出 行 30 元 代 芭 30px #333333 
20 福 币 #FF5339 28px 26px 


T20 


哪些 规 学 可 暂 定 , 日 后 再 调整 


前 期 因为 各 种 各 样 的 原因 ， 例 如 时 间 不 够 、 无 法 预知 后 面 的 情况 等 ， 没 有 办 法 把 所 有 的 规 
范 都 定好 ， 这 时 候 我 们 可 以 对 一 些 后 期 改动 成 本 小 的 模块 罩 时 确定 一 下 规范 ， 后 期 需要 修 
改 的 时 候 再 统一 调整 。 


1. 图 标 风格 
在 规范 力 标 的 时 候 ， 必 须 做 的 是 把 图 标 大 小 确定 ， 对 于 图 标本 身 的 样式 、 风 格 、 粗 细 等 可 
暂时 做 几 个 示意 的 样式 ， 等 所 有 界面 完成 后 ， 再 来 统一 绘制 。 


亿 人 旺 
三 了 白 VvV 
他 丛 @ DD 


2. 弹 窗 样式 


很 多 时 候 我 们 并 不 清楚 界面 内 都 需要 什么 样 的 弹 窗 样式 ， 文 字 最 多 有 多 少 个 ， 所 以 我 们 可 
以 先 定 几 个 最 常用 的 ， 例 如 双向 操作 ( 含 确 定 、 取 消 ) 弹 窗 、 单 向 操作 ( 只 有 一 个 操作 按 
钮 ) 弹 窗 。 


基本 弹 窗 ” Button H: 96px #FF5339 


双向 操作 W: 580px 单身 操作 W: 580px 
提示 信息 ,136 34px #333333 
160 我 是 文案 内 容 咯 可 以 是 两 行 30pxl60， 我 是 文案 内 容 咯 可 以 是 两 行 30px 
#999999 行 高 50 #999999 行 高 50 
[eo 
40 


哪些 规 沁 先 不 做 


空 日 页 插画 、 缺 省 页 、 占 位 图 等 ， 这 些 可 以 先 不 用 急 着 做 ， 等 项 目 都 完成 后 ， 再 来 做 就 可 
以 了 。 前 期 项 目 紧 急 的 时 候 ， 不 要 把 时 间 都 花费 在 这 些小 的 页 面 里 。 
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*es00 VIRGIN 全 4:21 PM 总 2% see00 VIRGIN 全 4.21 PM *“ 22% 0 
我 的 评论 答谢 记录 编辑 
. a 


站 gg 


哇 ， 订 单 全 部 都 评论 完了 ~ 没有 答谢 记录 呢 
空白 页 插画 
加 分 项 
1. 目录 
目录 相当 于 一 个 索引 ， 方 便 看 的 人 对 整个 规范 有 一 个 大 致 了 解 ， 而 且 能 帮助 团队 成 员 快 速 
找到 自己 需要 的 内 容 。 
2. 版 式 统一 


规范 文档 既然 是 统一 页 面 布 局 、 方 便 团 队 协 作 的 ， 那 么 它 本身 就 应 该 统一 ， 例 如 每 页 格 
式 、 标 题 大 小 、 正 文字 号 及 颜色 等 都 需要 保持 一 致 ， 这 样 才 更 能 让 别人 相信 这 是 一 个 经 过 
深思 熟 虑 做 出 来 的 规范 文档 。 


© 


高 度 间距 元 素 本 身 大 小 


再 例如 文档 里 所 有 间距 用 绿色 表示 、 元 素 用 紫色 表示 、 高 度 用 红色 表示 等 ， 让 每 个 颜色 的 
存在 都 变 得 有 规律 可 循 。 


田 重 点 


规范 本 身 的 作用 是 为 了 提高 团队 的 工作 效率 ， 不 要 顾此失彼 。 小 公司 的 产品 不 像 大 公司 体 
量 那 么 大 ， 规 范 不 需要 完全 照搬 大 公司 的 ， 而 是 要 根据 自己 公司 的 实际 情况 ， 制 作出 一 个 
适合 自己 的 、 遍 平 快 的 规范 文档 ， 让 规范 能 真正 发 挥 它 的 作用 。 


制定 规范 的 时 候 不 要 想 着 一 次 性 全 部 都 定好 ， 要 有 主 ; 次 ， 前 期 优先 定 一 些 重 要 的 ， 例 如 设 
计 图 尺寸 、 页 边 距 、 颜 色 、 字 号 、 图 标 大 小 、 按 钮 、 图 片 比例 等 ; 等 后 期 页 面 做 得 差不多 
的 时 候 ， 再 去 细 化 图 标 、 空 日 页 面 等 。 


记 住 最 重要 的 一 句 话 : 规范 要 能 真正 党 地， 能 给 团队 其 他 成 员 之 来 切实 的 作用 。 不 要 流 于 
形式 ， 否 则 再 好 的 规范 没有 人 用 也 是 枉然 。 


考 资料 
如 何 用 人 临 莫 来 提升 你 的 设计 能 力 ”http://t.cn/RiIm0S81 
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03 ”关于 适 玫 0 这 件 小 事 的 表 世 今生 


文 / 吴 萌 


很 多 人 刚 做 Ul 的 时 候 ， 根 本 不 知道 做 完 界面 还 需要 适 配 ， 以 为 把 设计 图 做 好 就 行 了 ， 其 
他 的 事情 跟 上 自己 没有 半点 关系 ， 实 际 踩 坟 之 后 才 发 现 问题 所 在 。 而 这 样 的 试 错 成 本 未 免 太 
高 ， 不 如 最 开始 准备 得 充分 一 点 。 


生 误 做 法 


正 是 由 于 部 分 设计 师 对 适 配 了 解 不 够 透彻 ， 以 至 于 实际 项 目 中 需要 把 750px 的 设计 稿 
适 配 到 640px、720px、1242px 的 屏 医 时， 都 选择 把 设计 稿 直 接 等 比 拉 伸 至 对 应 的 尺 
十 ， 然 后 再 重新 标注 。 殊 不 知 此 方法 不 仅 增 加 了 几 倍 工 作 量 ， 还 会 导致 最 终 的 效果 不 
如 人 得 。 


下 面 以 QQ 首页 为 例 ， 左 图 是 750px (iPhone 6 ) 的 设计 稿 ( 临摹 ) 直接 拉 伸 至 1242px 
(iPhone 6 Plus ) 的 效果 ， 右 图 是 实际 线 上 1242px 的 界面 。 


群 助手 
群 助手 @ [两 个 群 有 新 消息 ] 
[2 个 群 有 新 消息 ] 
微 视 
微 视 流 知 何 机 智 应 对 女友 拷问 ?答案 在 这 里 


如 何 机 智 应 对 女友 持 问 ? 答案 在 这 里 轩 
检 子 的 栓 子 
E 查 子 的 查 子 图 片 ] IMG_429D.PNG 
[图 片 ] IMG_4290.PNG 
a © 我 的 电脑 
_ 忙 半 加班 获 柱 掉 着 发 ， 闲 时 练 宇 码 宇 装 装 逼 ，.. 
Ki 我 的 电脑 
慷 盾 加 班 笋 夜 撞 掉 发 ， 闲 时 统 字 玛 字 装 洛 可 可 
司 未 要 不 要 一 起 约 乌 [ 叮 


洛 可 可 
固 末 要 不 要 一 起 约 个 饶 呀 腾讯 新 闻 
© 四 Sr 。 


信和 输 本 得 


甘 讯 新 闻 
杨 器 荣 身 曝光 : 颜 值 输 本 亲 pr 小 五 
本- 公约 好 的 
为 小 五 QQ 看 点 
< TH [ 热 训 闫 路 彤 173， 张 子 抽 160, 两 人 同 罕 


QQ 看 点 灿 白 
[ 热 说 1] 关 谤 影 173、 三 千 想 160. 两 人 同 容 思 思 
CL 


(*) 
~、 
一 
PT 


nm 


750px 直 接 拉 伸 1242px 截 图 
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相信 大 家 也 看 出 差别 了 ，750px 和 直接 拉 伸 后 的 界面 元 素 整 体 都 比 实 际 线 上 1242px 的 大 。 


750px 直 接 拉 伸 1242px 截 图 
之 所 以 说 这 样 的 方法 是 错 的 ， 有 两 个 原因 : 一 个 是 按照 此 方法 ，750px 和 1242px 所 显示 


的 内 容 是 一 样 多 的 ， 但 实际 上 1242px 的 屏幕 要 比 750px 的 长 一 些 ， 显 示 的 内 容 更 多 一 些 
才 对 。 如 下 图 京东 金融 所 示 。1242px 是 3 倍率 下 的 大 小 ， 要 和 750px 做 对 比 ， 就 需要 换算 


到 2 倍率 下 的 828px 做 对 比 。 


园 最 近 汀 并 248.00 


一 、 / 
园 最 近 消费 158.69 os 212 Ww 
手机 充值 信用 卡 还 转 隐 京东 众 入 
Le P= 
BB @ 口 地 局 全 O 二 
优惠 兰 包 转账 手 枢 充 值 。。 信用卡 还 未 苏 包 秒杀 车 主 服 务 生活 癌 筑 全 名 服务 
加 A\ [> 旧 
生活 介 费 京东 众 短 车主 服务 全 部 服务 


京东 闪 体 手 环 眼 量 抢 先 
1529 二 要 页 砚 环 厅 1 支付 优惠 


京 辟 神 利 社 出 行 特惠 日 


所 618 元 现金 航 低 1 分 钱 乘 车 


京 喜 福利 社 ”有 量 出行 特惠 [ea | 
四 . © 人 加 7 
支付 


支付 


泵 东 金 融 750px 京东 金融 828px 


男 一 个 原因 就 跟 数学 有 关 了 ，750px 的 页 面 要 放大 到 1242px 的 大 小 ， 需 要 放大 1.65 信 ， 
但 实际 上 750 是 2 信和 率 下 的 界面 ，1242 是 3 倍率 下 的 界面 ， 它 们 的 比例 实际 上 是 1 : 1.5， 


而 不 是 1 : 1.65。 


750px 直 接 拉 伸 比例 实际 比例 
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也 就 是 说 ， 由 750px 和 直接 拉 升 到 1242px 的 稿子 在 开 友 者 实现 的 时 候 会 出 现 这 样 的 情况 : 
图 标 是 1.5 信 的 大 小 ( 图 标 实现 的 时 候 用 的 是 3 倍率 切 图 文件 ) ， 而 文字 、 上 间距、 图 片 却 
是 1.65 信 的 大 小 ， 标 注 稿 也 是 按照 1.65 信 来 标注 的 。 这 样 就 会 影响 到 开发 布局 ， 导 致 出 
现 一 系列 误差 。 


750PX 1242 PX (正确 版 xX1.5) 1242 PX ( 拉 伸 版 Xx1.65) 
100x100 150x150 165x165 


由 下 图 可 见 ， 当 我 们 直接 在 拉 伸 的 设计 稿 中 标注 介 距 、 图 标 大 小 上 时， 实际 开发 的 图 标尺 十 
会 比 我 们 标注 得 要 小 ， 相 差 15px， 这 个 时 候 如 果 开 发 者 完全 按照 标注 稿 来 布局 ， 就 会 导致 
有 图 标的 区 域 间距 明显 和 其 他 地 方 不 一 样 ， 相 差 太 大 时 甚至 会 出 现 图 标 变形 的 情况 。 


国 开发 时 比 设计 稿 多 出 来 的 区 域 


既然 直接 拉 伸 设计 稿 的 方法 不 可 行 ， 那 么 难道 只 能 为 每 个 屏幕 尺寸 都 重新 做 一 套 设计 吗 ? 
当然 不 是 ， 这 样 的 开发 成 本 太 大 ， 而 且 也 没有 必要 。 


为 什么 不 能 一 稿 适 配 所 有 


大 多 数 人 对 于 750px 适 配 到 1242px 都 表示 能 理解 ， 但 对 于 750px 适 配 到 720px 就 理解 不 
了 ， 持 反对 意见 ， 觉 得 这 属于 iOS 和 Android 两 个 不 同 的 端 ， 标 签 栏 和 导航 栏 高 度 都 不 
一 样 ， 不 单独 输出 设计 稿 的 话 ， 图 标 、 图 片 会 变形 ， 间 距 会 太 窒 等 。 


那 下 面 就 来 一 一 解释 下 大 家 对 于 750px 适 配 到 720px 存 在 疑惑 的 点 。 
1. 图 标 变形 


开 上 者 在 做 的 时 候 都 是 用 的 2 倍率 、3 倍 率 的 切 图 ， 哪 个 屏幕 尺寸 用 哪 套图 是 根据 倍率 来 选 
择 的 ， 同 一 个 倍率 下 的 图 标 大 小 、 间 距 、 字 号 都 是 一 样 的 。 
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2 倍率 3 倍率 


2. 图 片 变 形 
图 片 都 是 按照 比例 来 设置 的 ， 只 要 标注 的 时 候 只 标注 比例 ， 而 不 是 把 蜗 高 都 限制 死 ， 适 配 
不 统一 的 问题 是 可 以 避免 的 。 

精 选 受 看 ee 电影 


无 服务 @@ 六 上 午 9:50 12% ED (@ 谢 的 内 出 


精 选 爱 看 ”如 彭 传 电视 剧 电 一 


CQ 斗 破 芭 窜 内 山 加 


【法 医 秦 明 幸 存 者 】 十 年 了 ! 连 坏 杀 手 况 是 身边 人 ? 


【2018 苹 果 秋季 新 品 发 布 会 同 传 版 】 全 程 .… 猜 你 在 追 》 


精彩 看 不 停 “> (3 守 战 纪 最 强 搭档 诞生 


EF 


幸福 三 重奏 沙 海 聊 高 
机 将 惑 勤 捞 娇 和 要 陈建斌 隘 产 ”梁山 CP 喜 提 地 下 婚 户 ? 全 新 ] 
如 喜 传 .升级 皇 贵妃 。 ”幸福 三 重奏 :特辑 
@ 2 Ss 8 -oA 
腾讯 视频 640 px 腾讯 视频 750 px 


3. iOS 和 Android 的 平台 差异 


有 一 些 人 总 认为 这 两 个 平台 存在 差异 性 ， 例 如 它们 的 导航 栏 、 标 签 杜 、 时 间 栏 不 一 样 大 ， 
怎么 能 统一 适 配 呢 ?” 其 实 头 部 的 导航 栏 、 时 间 栏 和 底部 的 标签 栏 这 些 平台 的 基础 控件 ， 与 
界面 内 的 元 素 不 在 一 个 z 轴 上 ， 它 们 属于 界面 最 上 层 ， 界 面 的 尺寸 也 不 受 它 们 的 影响 。 


如 下 图 所 示 ， 哗 哩 哗 哩 在 Android 和 iOS 平台 下 的 基础 控件 不 一 样 ， 但 是 并 不 会 影响 到 导 
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般 栏 下 方 的 Tab 栏 的 高 度 。 所 以 事实 证 明 ， 适 配 跟 平台 并 没有 太 大 的 关系 。 


Ve RAD. 
NN 


\ 5482 D2:34.39 
9 月 12 日 LpL 珊 9 月 10 日 
JDG 


哗 哩 哗 哩 720px(Android) 哗 哩 哗 哩 750px(iOS) 


掌握 正确 的 适 配 规则 


. 倍率 相同 
适 配 需要 在 同一 倍率 下 ， 如 果 不 是 则 需要 换算 到 相同 倍率 ， 再 进行 适 配 。 既 然 要 做 比较 ， 
当然 要 在 同一 水 平 线 上 ， 总 不 能 让 姚明 跟 林 丹 去 比 羽 毛 球 吧 。 


知道 手机 的 屏幕 分 辨 率 和 倍率 之 后 ， 就 可 以 算出 在 其 他 倍率 下 ， 屏 幕 分 辨 率 是 多 少 。 例 如 
iPhone 6 的 分 辩 率 是 750 x 1334 (2 倍率 下 ) ， 乘 以 1.5 之 后 就 可 以 算出 3 倍率 下 的 大 小 。 


1 与 


zx A200 


50 x 1334 


标准 大 小 2 倍率 下 3 倍率 下 


可 得 其 他 手机 的 屏 基 分 状 袜 在 不 同 售 率 下 的 大 小 ， 红 框 处 表示 正常 的 分 辨 率 大 小 。 


iPhone 5/5c-5s 


iPhone 6/7/8 


iPhone 6p/7p/8p 


红 米 NOTE 等 机 型 


华为 mate 8 等 机 型 


适 配 只 跟 倍率 相关 ， 同 一 倍率 下 ， 


rm 


we 


hed 


we 


"mm 


EE EE 


720x1280 
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3 倍率 


960x1704 


1125x2001 


”7 


Wa ee ee ee 


Zee 


WD ep ep ep pp en ep pm em 


界面 上 的 | 间距、 文字 大 小 、 图 标 大 小 是 一 样 的 ， 不 同 


的 只 是 屏幕 显示 内 容 的 营 度 和 高 度 不 同 ， 所 以 说 在 2 信人 率 下 ，720px、750px、640px、 
828px 页 面 上 的 元 素 大 小 相同 ; 在 3 倍率 下 ，960px、1080px、1125px、1242px 页 面 上 


的 元 素 大 小 相同 。 


下 面 以 虾米 音乐 为 例 ， 分 别 对 比 640px、720px、750px 页 面 上 的 元 素 大 小 ， 证 实 界面 上 
的 间距 、 文 字 大 小 、 图 标 大 小 都 是 一 样 的 。 


4 养 是 米 


中 


由 米 首 乐 640px 


人 在 适 配 的 时 候 通 常 


HD 


站 消息 中 心 @ 

©) 二 [ Ce 
Wad bd C) 心 / Bb 
| 嫩 状 和希 分 Li 个 人 中 心 


是 米 首 乐 720px 


MM 二 室 


查 子 的 覃 子 


六 养 奸 米 
叫 消息 中 心 ® 
(@) 我 的 赞赏 


© 全 家 | 2 鳃 
笑柄 折 的 绩 乐 动 区 人 让 


是 米 音 乐 750px 


遵循 三 个 原则 . 等 比 缩放 、 弹 性 控件 、 文 字 流 目 适 应 。 
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中 门 
中 | 


等 比 缩放 弹性 控件 文字 流 目 适应 


1 ) 等 比 缩放 


等 比 缩放 指 的 是 该 元 素 的 尺寸 大 小 并 不 是 固定 的 ， 是 会 跟随 着 屏幕 的 大 小 〈 一 般 是 宽度 ) 
变化 而 变化 。 如 下 图 App Store 的 搜索 结果 页 ， 单 个 预览 图 的 比例 是 16 : 9， 不 管 屏幕 分 
状 率 如 何 变化 ， 图 片 比例 并 不 会 发 生变 化 。 


无 SIM 卡 写 23:24 可 上 94% Wm 
无 服务 党 下 午 11:24 本 11% + 


Q 是 米 音乐 四 取消 


虾米 音乐 -听见 不 同 (… 
一 起 探索 音乐 的 美好 5 


起 林 杂 目 
次 商 次 衣 直 


酷 我 音乐 -好 音 .… 


直击 二 友 家 


App Store 640 px App Store 750px 


标注 的 时 候 ， 我 们 也 只 希 要 标注 好 页 边 距 、 图 片 比例 、 图 片 间 距 束 好 ， 开 上 友 者 束 可 以 把 适 


配 规 则 写成 随 屏 幕 铝 度 变 化 而 变化 。 


和 和 
| 无 :SIM 卡 全 23:24 


4 94% mi) | 
| 1 Q 是 米 音乐 @ 取消 | 
本 虾米 音乐 -听见 不 同 (... | 
| 让 探索 音乐 的 闵 好 更 新 ',@ — 40 
区 寅 寅 寅 育 认 ! 1! 


一 一 16 


| |- ' ' 

| ! | 

! ; sw5 。 酷 我 音乐 -好 音质 用 … ! 

| | 折 歌 唱歌 正版 音乐 播放 器 获取 | ; 

! PN pe 
国 ® 4 UO a 
vol 及 戏 pp 更 新 皖 索 


2 ) 弹性 控件 
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计算 方式 ; 


(屏幕 尺寸 -左右 页 边 距 -图 片 间 距 ) /3， 得 出 图 片 
宽度 ， 再 根据 图 片 比例 ， 得 出 图 片 高 度 


(750-40-40-16-16) /3 =212 
根据 图 片 比例 16 :9 , 得 出 图 片 的 高 度 
高 =212/9*16=377 


弹性 控件 指 的 是 元 素 尺寸 不 变 ， 间 距 随 着 屏幕 的 咒 度 自 适 应 ， 屏 幕 越 芝 ，| 旧 距 越 大 。 


无 服务 全 下 午 7:53 *6% 
设置 

加 用 0 

园 吕 示 与 亮度 

墙纸 

回声 半 

国 sr 与 搜索 

辆 触 控 ID 与 密码 

网 SOS 紧急 联络 

图 电池 

隐私 


iTunes Store 与 App Store 


设置 640px 


无 SIM 卡 令 19:53 


© 4 93% i) 
设置 

拉 通用 

图 显示 与 亮度 

墙纸 

团 声音 与 触感 

国 sr 与 拉 过 

园 和 触 控 ID 与 密码 

网 sos 紧急 联络 

图 电池 

隐私 


iTunes Store 与 App Store 


目 钱包 与 Apple Pay 


外 kk 户 与 灾 友 


设置 750 px 
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3 ) 文字 流 自 适 应 
一 行 能 显示 的 文字 数量 和 屏幕 营 度 成 上 正比， 屏幕 越 和 觉 ， 一 行 能 显示 的 文字 数量 也 就 越 多 。 


T6GB+64GB 立 减 100 元 】 [4GB+64GB， 限 时 种 
r6GB+64GB 立 减 100 元 ， rT4GB+64GB， 限 杀 ， 立 减 150 元 】 "6GB+128G8， 限 时 秒杀 ， 立 减 100 
元 三 星 AMOLED 全 面 屏 小 屏 旗舰 / 对 龙 710 处 理 器 / 
时 秒杀 ， 立 减 150 元 “6GB+128GB， 限 时 AI 认 最 光 双 报 /前 置 2000 万 柔 光 自拍 
秒杀 ， 立 减 100 元 , 三 星 AMOLED 全 而 屏 小 
屏 旗 舰 / 晓 龙 710 处 理 器 | Al 超 感光 双 摄 / 前 
置 2000 万 柔 光 自拍 


小 米 商 城 640px 小 米 商 城 750px 


3. 适 配 跟 平台 基础 控件 无 关 
其 实 并 不 是 界面 的 所 有 元 素 都 需要 进行 适 配 ， 我 们 只 需要 适 配 中 间 那 一 块 区 域 即 可 。 


台 基 础 控件 
天 猫 无 猫 霹 市 淘金 币 聚 划算 分 类 


润 宇 头条。 县 i 秋季 解 鱼 最 肥美 ， 你 怎么 能 错过 呢 ? 


四 淘 抢 购 全 有 好 货 

旧时 限量 近 En 相 见 慢 晚 的 宝 见 

困 回 图 > 

@ 天 天 特价 EF 
9.9 元 新 人 专 享 i 


立 忆 去 抢 》) 


加 淘宝 直播 


红 主 揪 推 若 


【 达 看 边 买 >) 
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而 上 下 导航 栏 的 高 度 不 国定 ， 每 个 平台 的 高 度 不 一 样 。 例 如 iOS 的 导航 栏 是 
88px，Android 有 112px、104px 等 。 但 是 不 管 高 度 如 何 ， 只 需要 做 到 让 元 素 居 
中 即 可 。 


4. 实际 案例 

说 了 那么 多 ， 是 时 候 来 分 析 一 个 实际 的 案例 了 。 适 配 其 实 总 结 起 来 就 三 个 步骤 : 先 换算 至 
同一 个 倍率 ， 再 去 调整 界面 元 素 ， 最 后 将 调整 好 的 界面 按照 倍率 还 原 到 最 开始 需要 适 配 的 
尺寸 。 


同一 个 倍率 下 


先 将 需要 适 配 的 两 个 尺寸 换算 至 同一 个 比例 


适 配 三 原则 
再 根据 适 配 三 原则 调整 界面 元 素 的 位 置 和 间距 


实际 倍率 
最 后 将 调整 好 的 界面 按照 倍率 还 原 至 最 开始 需要 
适 配 的 尺寸 


以 750px (iPhone 6 ) 适 配 至 1242px 首 先 适 配 需要 人 在 同一 个 倍率 下 ，750 x 1334 
是 2 倍率 下 的 ，1242 x2208 是 3 倍率 下 的 ， 根 据 倍 率 换 算 后 者 的 2 倍率 大 小 是 
828x 1472。 


所 以 要 想 将 750 x 1334 适 配 至 1242 x2208， 惑 需要 先 把 750 x 1334 适 配 至 
828 x 1472， 然 后 再 将 调整 好 的 界面 x 1.5 到 1242 x 2208。 
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四 中国 移动 
群 助手 
[2 个 群 有 新 消息 ] 


微 视 全 1 
DS 0 和亲 册 知 对 妇 友 持 问答 在 这 只 
EW | 有 有 | “中 栖 子 的 橙子 
拉手 | mm | [图 片 ]IMG_4290PNG 名 


z wa Pl 我 的 电脑 
RT 人 :©| 忙 时 加 琉 熬 夜 掉 掉 发 ， 闲 时 练 字 码 字 装 .， 图 
“本 杜 子 的 林子 | mn | 
全 ~ 要 时 在 这 时 ov 志 ee | @| 洛 可 可 
pe 
加 oo es OO @ 周 未 要 不 要 一 起 约 个 恢 咱 
我 的 电 及 上 ed 
(oO) { 时 必 殉 租 直 冲 性 牙 ， 用 四 原 字 证 站 蒜 蒜 进 人 © ee : se > 腾讯 新 闻 
下 ai | 忆 杨 震 将 身 曝光 : 产值 痊 本 痢 
执 让 竺 闻 ia 多 Mr we 
[全 局 可 自身 姑 w ， 导 全 缀 本 加 | | 和 小 五 
得 所 . 人 : ed 好 的 好 的 
Or 8 "| 人 six 
onto 全 名 | [ 热 议 ] 关 晓 彤 173、 张 子 机 160. 两 人 同 窑 .. 
[Sy | Nt © 
PP 2 7 PT 5 
X1.5 
750x1334 2 倍率 了 828x1472 2 倍率 » 1242x2208 3 倍率 


其 他 的 例如 750px 如 何 适 配 至 720px、640px， 原 理 是 一 样 的 ， 它 们 的 倍率 是 一 样 的 ， 融 
省 了 头 尾 的 那 两 步 ， 只 需要 根据 适 配 三 原则 调整 界面 元 素 即 可 。 


需要 注意 的 点 


1. 小 屏幕 适 配 

我 们 的 设计 尺寸 基本 都 是 用 750px 的 居多 ， 这 就 会 涉及 小 屏幕 的 适 配 占 题 ， 当 一 个 元 素 在 
750px 上 显示 效果 很 完美 ， 到 640px 上 可 能 就 放 不 下 了 。 所 以 在 作 图 的 时 候 ， 设 计 师 需要 
用 动态 的 眼光 去 考虑 问题 。 下 面 就 来 讲述 几 个 最 常 出 现 的 问题 。 


1 ) 弹 窗 


如 下 图 弹 窗 的 样式 ， 在 设计 尺寸 为 750px 上 显示 很 完美 ， 但 是 不 做 任何 调整 ， 直 接 适 应 到 
640px 的 屏幕 上 ， 就 放 不 下 了 。 所 以 这 个 时 候 ， 我 们 就 需要 定义 一 些 适 配 规则 ， 例 如 在 小 
屏幕 缩小 字号 、 缩 小 间距 等 。 


字号 缩小 2px (24px) ， 左 右 间距 
改 成 32px， 屏 幕 均 分 


设置 当前 所 在 年 级 
注 ， 暑 假期 间 请 选择 新 学 年 的 年 级 


设置 当前 所 在 年 级 


注 ; 暑假 期 间 请 选择 新 学 年 的 年 级 


小 学 阶段 


w 幼儿 园 大 注 
小 学 阶段 


w 功 几 园 大 班 一 年 专 二 年 级 


三 年 级 四 年 级 五 年 级 


六 年 级 


初中 阶段 


2 ) 文字 截断 距离 

屏幕 的 大 小 会 直接 影响 到 每 行 显示 的 字数 ， 当 一 行文 字 的 右 侧 有 元 素 的 时 候 ， 就 涉及 文 
字 和 元 素 之 间 的 安全 截断 距离 ， 也 就 是 文字 最 多 能 显示 的 区 域 。 很 多 时 候 设 计 师 在 做 设 
计 稿 的 时 候 ， 没 有 考虑 到 文字 的 极端 情况 ， 这 就 导致 在 小 屏幕 的 上 时候， 文字 和 元 素 产 生 
重 赤 现象。 


例如 下 图 爱 奇 艺 “ 我 的 ”页 面 ， 在 750px 的 界面 上 昵称 显示 得 很 完整 ， 但 是 到 640px 上 就 
显示 不 全 ， 这 就 需要 我 们 定义 一 下 文字 可 显示 的 区 域 ， 当 文字 长 度 超 过 这 个 区 域 的 时 候 ， 
部 分 文字 省 略 ， 用 “.… 代替。 


我 的 


人 栓 子 的 栓 … 下 \ 查 子 的 柱子 Mandy 


“WW < 


爱 奇 艺 640 px 爱 奇 艺 750 px 


2. 平台 差异 
IOS 和 Android 两 端的 系统 级 别 的 控件 样式 不 同 ， 所 以 我 们 可 以 为 两 端 单独 做 几 个 样式 ， 
这 个 成 本 不 大 ， 效 果 却 很 好 。 例 如 iOS 平台 的 搜索 是 和 矩 形 框 ， 而 Android 平台 的 搜索 是 
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下 画 线 。 
十 叶 | 中 国 好 前 这 | 一 只 土 投 好 都 比 我 时 出 国 淘宝 头条 一 W 秋季 鲫鱼 最 肥美 ， 你 怎么 能 铸 过 呢 ? 
3 量 新 | 女人 过 了 25 岁 ， 这 “两 种 "衣服 就 别 2 人 汉 折 风 OR 
a 有 好 货 TE 过 
GY 安 人 加 天 天 特价 为 二 直播 
一 
爱 和 逛街 必 买 清音 aa 
淘 | (sn 2 口 只 使 用 支付 宝 账号 快速 登录 
0 Do OH oa 
淘宝 720px(Android) 淘宝 750 px(iOS) 
3. 单 屏 页 面 


大 部 分 的 界面 适 配 都 是 考虑 屏 昌 镶 度 拓 多 ， 局 度 只 会 影响 一 屏 内 显示 内 容 的 多 少 ， 屏 幕 
局 显示 的 内 容 融 长 一 点 。 对 于 瀑布 流 布 局 来 说 ， 高 度 根 本 不 需要 进行 适 配 。 但 总 是 有 一 
些 特殊 的 单 屏 页 面 ， 例 如 : 空 日 页面 、 音 乐 播放 页 面 等 需要 人 芷 所 有 屏 脐 上 显示 一 样 多 的 


内 容 。 


1 ) 空白 页 面 
类 似 下 图 “我 的 看 单 ” 这 种 比较 简单 的 页 面 ， 如 果 固 定 上 方 间距 ， 那 么 在 大 屏幕 上 就 
会 显得 内 容 偏 上 。 这 个 时 候 要 想 让 所 有 屏幕 显示 的 内 容 都 一 样 ， 可 以 将 上 方 和 下 方 的 
空 日 区 设置 一 个 尺寸 比例 ， 这 样 不 管 在 什么 屏幕 上 ， 内 容 相 较 于 整个 屏幕 来 说 ， 位 置 
都 是 一 样 的 。 


具体 计算 方法 : 屏幕 局 度 碱 去 上 下 导 舰 ， 再 减 去 内 容 区 域 的 高 度 ， 剩 下 的 区 域 按照 比例 来 
分 配 。 图 中 是 上 方 占 3/7 ， 下 方 占 4/7。 
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gr 


您 的 看 单 还 没有 添加 视频 


人 


您 的 看 单 还 没有 添加 视频 


| 4 
2 ) 音乐 播放 页 面 
这 个 页 面相 较 于 空 日 页 面 来 说 ， 要 复杂 一 些 ， 但 是 原理 是 一 样 的 。 把 能 够 按照 基础 适 配 规则 
的 地 方 固 定 下 来 ， 留 一 些 自 适 应 的 部 分 。 例 如 下 图 网 易 音 乐 ， 同 样 是 2 倍率 下 的 界面 ， 播 放 
操作 区 域 的 高 度 都 是 一 样 的 按照 基础 适 配 规则 来 的 ， 而 光盘 区 域 则 是 固定 左右 | 间距 得 出 。 


网 易 云 首 乐 640 PX 网 易 云 音乐 750 Px 


高 要 根据 屏 界 高 度 目 适应 的 只 有 绿色 矩形 区 域 ， 其 实 读 者 有 没有 发 现 ， 把 这 个 图 简化 后 ， 
就 和 和 上面 讲 的 空 日 页 面 的 适 配 方法 一 样 了 。 不 过 需要 注意 的 是 上 自 适应 的 部 分 不 要 超过 两 
处 ， 超 过 两 处 之 后 ， 界 面 变 数 太 大 ， 不 利于 计算 ， 也 没 太 大 必要 。 
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”比例 自 适应 
轩 规则 适 配 


及 计 稿 尺寸 


设计 稿 尺寸 在 我 看 来 并 没有 特别 本 质 的 区 别 。 从 原理 上 来 看 ， 你 可 以 用 任何 想 用 的 设计 尺 
寸 ; 只 不 过 从 适 配 的 角度 来 说 ，750px ( 2 倍率 ) 、720px ( 2 倍率 ) 、375px ( 1 倍率 ) 
这 三 个 尺寸 相对 更 合适 些 。 


我 目 己 之 前 用 过 750px， 也 用 过 720px， 那 时 候 就 想 不 明日 为 什么 还 有 人 用 1 信和 率 作 图 ， 现 在 
市 面 上 都 没 1 倍率 的 手机 了 ， 用 1 倍率 作 图 导出 2 倍率 、3 倍 率 图 标 不 都 虚 边 了 吗 ? 但 后 来 换 了 
一 个 新 工作 ， 同 事 都 是 用 375px( 1 倍率 ) 作 图 ， 习 惯 了 之 后 砾 现 两 者 并 没有 太 大 的 区 别 。 


只 是 有 些 图 标 不 是 整数 的 时 候 ， 希 要 手动 导出 2 倍率 、3 倍 率 版 本 ， 但 其 实 就 算 用 750 (2 
倍率 ) 作 图 怕 图 标 虚 边 ， 也 还 是 要 手动 导出 3 倍率 的 ， 所 以 都 一 样 。 用 1 倍率 的 好 处 是 ， 很 
多 国外 的 资源 都 是 用 1 倍率 做 的 ， 就 可 以 直接 倍率 了 


i 的 是 ， 当 在 1 倍率 下 做 分 割 | 线 的 上 时候， 需要 改 成 0.5px， 了 这样 导出 2 倍率 图 后 
是 1px。 建 议 分 割 线 用 内 阴影 做 ， 而 不 要 直接 用 0.5px 的 线 。 


小 拉 巧 
作 图 的 时 候 如 果 想 要 知道 当前 页 面 的 元 素 人 在 小 屏 坟 上 是 否 放 得 不 能 每 次 都 把 当前 页 


面 拖 动 到 小 屏蔽 上 看 看 实际 效果 ， 这 样 成 本 太 大 。 其 实 有 一 个 非常 简便 的 方法 可 以 解决 这 


750px 和 640px 的 界面 相差 110px (2 倍率 下 ) ， 我 们 只 需要 在 750px 的 界面 上 减 去 
110px， 看 是 否 能 放 得 下 界面 元 素 ， 如 果 放 得 下 ， 就 表示 在 小 屏幕 上 也 能 全 显示 。 


110 


st 中国 移 动 倒 09:41 @7YV 34%mn) 


精 选 ” 爱 看 如 就 传 ”电视剧 电影 组 三 


(Q， 订 松 欧 站 WO 


如 果 想 要 知道 字数 是 否 能 放 得 下 ， 也 可 以 通过 计算 的 方式 得 出 结论 。 用 110px 除 以 字号 大 
小 ， 就 可 以 得 出 小 屏幕 的 比 设计 稿 少 显 示 几 个 字 。 例 如 字号 是 30px， 在 750px 的 屏幕 上 角 E 
显示 30 个 字 ， 那 么 在 小 屏幕 上 就 只 能 显示 26 个 字 了 。 


辆 重点 


适 配 这 个 概念 很 特殊 ， 它 看 起 来 很 简单 ， 简 单 到 大 多 数 人 都 觉得 自己 会 了 ， 不 用 再 去 研究 
了 ， 但 其 实 只 懂 了 皮毛 ， 并 不 清楚 原理 。 例 如 很 多 人 都 说 自己 会 PS， 但 跟 那些 专业 的 人 
员 比 起 来 ， 你 自己 所 知道 的 不 过 是 冰山 一 角 。 所 以 我 们 要 时 刻 保持 一 颗 求 知 的 心 ， 不 要 限 
于 已 有 的 知识 。 


最 后 总 结 一 下 全 文 最 重要 的 几 点 ， 帮 助 大 家 加 深 印 象 。 
( 1 ) 等 比 拉 伸 界面 去 适 配 的 方法 是 错误 的 ， 也 是 极其 浪费 人 力 成 本 的 ; 


( 2 ) 适 配 跟 平台 无 关 ， 只 跟 倍率 相关 ，750px 和 720px 的 尺寸 从 适 配 的 角度 来 看 ， 都 是 
一 样 的 ， 只 是 界面 尺寸 相差 了 30px; 


( 3 ) 适 配 三 原则 :等 比 缩放 、 弹 性 控件 、 文 字 流 自 适 应 ; 


(4 ) 适 配 尺寸 不 要 标 死 ， 要 用 动态 的 眼光 去 看 。 做 的 时 候 需 要 考虑 极端 情况 ， 最 常见 的 
例如 小 屏幕 适 配 问 题 等 。 
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04 ”如 何 高 效 地 进行 验收 


文 / 吴 萌 


一 直 以 来 , 设计 验收 都 不 太 受 重视 , 设计 师 总 是 习惯 于 把 时 间 用 在 雕琢 设计 稿 上 , 而 忽略 挥 
后 期 的 设计 验收 。 这 就 导致 程 序 员 在 修改 Bug 的 时 候 , 常常 需要 多 次 修改 才能 还 原 设计 稿 


变 , 多 花费 几 分 钟 ， 就 能 大 大 提高 Bug 的 修改 效率 。 
Bb 4 pa 
关于 设计 验收 
之 所 以 验收 不 受 重 视 ， 我 觉得 主要 有 两 个 原因 : 一 个 是 对 自己 和 合作 的 程序 员 极 其 自信 ， 


认为 对 方 能 领会 目 己 所 有 的 点 , 会 完全 按照 设计 稿 来 ; 另 一 个 是 设计 师 没 有 意识 到 验收 的 
重要 性 , 潜意识 里 认为 最 后 开 友 的 效果 不 好 是 开 友 人员 的 责任 ， 跟 上 自己 没有 天 系 。 


1. 蚀 误 的 做 法 
1 ) 口头 说 明 


在 实际 工作 中 很 多 设计 师 发 现 问 题 后 ， 只 是 口头 告诉 开发 者 哪里 要 改 ， 这 种 方式 很 容易 出 
现 你 说 了 10 个 ， 但 开发 者 只 记得 6 个 ， 最 终 只 改 对 了 4 个 的 情况 。 重 复 返 工 以 及 沟通 的 时 
上 则 太 长 ， 效 率 不 高 。 当 然 在 这 种 口头 说 明 的 方法 之 下 还 产生 了 一 个 进 阶 版 ， 就 是 搬 个 小 板 
莫 坐 到 开 上 友 者 面前 指 哪 改 哪 ， 但 这 个 也 仅 限 于 对 接 开 友人 员 少 的 时 候 ， 当 你 同时 对 接 三 五 
个 开 上 友 者 的 时 候 ， 是 没有 时 间 、 精 力 这 么 做 的 ， 而 且 工 作 效率 也 很 低 。 


2 ) 让 开发 者 去 找 之 前 的 标注 稿 

验收 的 时 候 友 现 有 问题 ， 让 开 友 者 自己 去 找 之 前 的 标注 稿 ， 对 照 着 修改 ， 这 样 的 做 法 很 容 
易 出 现 改 了 但 是 没 改 到 位 ， 重 复 返 工 。 例 如 ， 设 计 稿 的 元 素 大 小 是 20px， 第 一 次 开发 者 做 
的 是 27px， 一 轮 验 收 后 他 自己 回去 对 照 标 注 稿 修改 ， 改 成 了 18px。 这 就 意味 着 你 在 二 轮 


念 收 的 时 候 还 得 去 提 这 个 问题 ， 时 间 成 本 浪费 较 大 。 


18 x 18 


20Xx20 
设计 入 


二 轮 验 收 


作为 设计 师 ， 我 们 每 天 都 是 跟 像素 打交道 ， 间 距 、 字 号 差 个 几 像 素 ， 我 们 一 眼 就 能 看 出 
来 。 但 是 作为 每 天 跟 代码 打交道 的 开发 者 来 说 ， 差 了 几 像 素 在 他 们 眼 里 是 没 区 别 的 ， 所 以 
我 们 需要 明确 地 告诉 他 这 里 移动 几 像 素 ， 那 里 字号 改 大 几 像 素 。 


这 就 跟 谈 恋 爱 一 样 ， 男 生 和 女生 的 思维 很 不 一 样 ; 同 理 ， 设 计 师 和 开发 者 的 思维 也 是 不 一 
样 的 。 我 们 在 验收 的 时 候 ， 可 以 稍微 改变 一 下 方式 ， 多 站 在 开发 者 的 角度 考虑 问题 ， 前 期 
多 伦 几 分 钟 ， 就 能 有 效 减 少 双方 后 续 的 沟通 时 间 。 


2. 正确 的 做 法 


1 ) 截图 验收 

验收 的 时 候 ， 我 们 需要 对 开发 实现 后 的 效果 进行 截图 ， 与 设计 稿 做 对 比 。 当 然 不 是 所 有 的 
图 都 需要 截 ， 可 以 先 体验 一 下 ， 看 看 哪里 有 问题 ， 不 太 对 劲 ， 然 后 再 截图 对 比 。 不 过 当 我 
们 经 验 不 足 的 时 候 ， 可 以 都 截图 去 做 对 比 ， 确 保 万 无 一 失 。 


原则 上 ， 主 流 的 各 个 尺寸 的 机 型 都 需要 去 验收 ， 但 在 实际 中 因为 各 种 原因 限制 ， 很 难 
仿 收 所 有 的 机 型 ， 一 般 主 要 去 验收 iPhone 的 大 、 中 、 小 屏幕 ，Android 的 大 、 小 屏 
幕 ， 其 他 的 屏幕 大 致 看 一 些 效果 ， 如 果 是 特殊 的 屏幕 就 根据 用 户 使 用 量 来 决定 是 否 
进行 验收 。 


2 ) 和 设计 稿 做 对 比 
截图 完毕 之 后 ， 就 需要 和 设计 稿 做 对 比 了 。 我 们 可 以 直接 把 截图 放 人 在 设计 图 上 方 ， 降 低 透 
明度 ， 大 致 比 对 下 ， 惑 知道 哪里 有 出 入 ， 然 后 再 具体 标注 参数 。 
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[1 局 我 的 购物 车 
加 我 的 福 包 他 
© @@ 图 标 需 要 更 换 ，48x48 
”Se @ 文字 改 成 30px #333333 
名 消息 中 心 @@ ”分割 线 在 所 有 屏幕 都 是 1px #e9e9e9 
全 设置 @@ 最 后 一 行 的 颜色 改 成 白色 #ffffff 
高 度 缩 小 12px (40px) 
© 
位 后 息 


我 的 


这 其 中 也 有 几 个 小 技巧 。 当 图 标 切 图 错误 的 时 候 ， 和 直接 注 明 该 图 标 需 要 更 换 ， 图 片 比 
例 不 对 的 时 候 也 一 样 。 总 之 ， 原 则 融 是 写 得 简洁 明了 ， 让 人 一 眼 就 能 看 懂 。 举 个 例 
子 ， 设 计 稿 做 的 间距 是 40px， 开 发 实现 后 的 效果 是 52px， 这 个 时 候 我 们 可 以 直接 标明 
上 间距 缩小 12px， 因 为 这 样 程序 员 就 只 需要 在 原来 设置 的 参数 上 减 12px， 而 不 用 再 去 算 
参数 了 。 


@@ 高 度 缩小 12px (40px) 


© 


验收 需要 注意 的 问题 


1. 分 割 线 


在 验收 的 时 候 要 特别 注意 分 割 线 的 问题 ， 分 割 线 在 所 有 屏幕 上 都 是 1px， 但 是 很 多 程序 员 
没有 注意 这 个 ， 或 者 说 设计 师 在 开 友 前 没有 特别 说 明 ， 程 序 员 融 写成 了 1pt。 因 为 pt 是 1 倍 
率 下 的 单位 ，px 是 实际 单位 ， 所 以 在 做 分 割 线 的 时 候 ， 单 位 需要 是 px， 这 样 才能 保证 每 个 
屏幕 的 分 割 线 都 是 1 像素 。 
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pt、px 关系 图 


2. 文字 截断 沁 围 
当 文字 左右 两 边 有 留 白 的 时 候 ， 我 们 需要 标明 文字 可 显示 的 范围 ， 当 文字 字数 超过 范围 
时 ， 需 标明 是 折 行 还 是 显示 “...”。 


售后 申请 申请 记录 


订单 编号 : 544576151678791 下 单 时 间 : 2017/08/2115:15 


文字 最 多 显示 1 行 ， 直 出“..,” 24 
® wm Apple iPhone 8 (A1863) 64GB— 


| ra 
“ 二 ”金色 移动 联通 电信 4G 手 机 
|- ”颜色 : 金色 版 本 : 全 网 通 版 
SN 1 “9999 福 币 x1 
该 订单 需要 确认 收 货 后 才 可 申请 售后 ( 申请 售后 
订单 编号 : 544576151678791 下 单 时 间 : 2017/08/21 15:15 
掌 阅 (iReader) 全 新 轻薄 6.8 英 十 


纸 质 级 墨水 屏 8G 超 大 存储 电 纸 .… 
颜色 : 黑色 版 本 : 悦 享 版 


1199 福 币 x1 


早期 设计 稿 
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3. 小 屏 适 配 问题 

设计 师 普 遍 用 的 设计 尺寸 都 是 750px( 1 倍率 为 375px ) ， 一 些 排版 也 是 基于 这 个 尺寸 
的 ， 那 么 对 于 640px 的 手机 来 说 ， 有 菏 些 地 方 就 会 出 现 排 不 下 的 情况 。 这 个 时 候 需 要 设计 师 
在 做 设计 稿 的 时 候 就 考虑 这 一 点 ， 并 给 出 适 配 规 则 。 在 后 期 验收 的 时 候 也 特别 需要 去 注意 
这 个 问题 。 


字号 缩小 2px (24px) ， 左 右 间距 
改 成 32px， 屏 幕 均 分 


设置 当前 所 在 年 级 


注 : 暑假 期 间 请 选择 新 学 年 的 年 级 


设置 当前 所 在 年 级 


注 : 暑假 期 间 请 选择 新 学 年 的 年 级 


小 学 阶段 


w 纳 儿 园 大 班 
小 学 阶段 


VY 幼儿 园 大 班 


猿 辅导 750 Px 狂 辅 导 640Px 


4. 沟通 不 到 位 导致 的 问题 
有 一 些 页 面 有 很 多 种 实现 方式 ， 如 果 前 期 没有 跟 开 发 者 沟通 清楚 ， 就 会 导致 最 终 实现 的 效 
果 存 在 误差 。 如 果 页 面前 期 单 给 一 张 静 态 图 ， 开 发 者 根本 不 知道 设计 师 想 要 的 实现 方式 是 
什么 ， 是 固定 间距 还 是 控制 左右 距离 或 中 间 自 适应 。 最 后 很 大 可 能 就 会 按照 自己 的 理解 去 
做 了 ， 叶 致 出 现 重复 返工 的 现象 。 


验收 文档 


当 验 收 页 面 较 少 时 ， 可 以 直接 把 修改 意见 友 给 对 应 的 开 上 友 者 ; 但 是 如 果 同 一 批 次 验收 的 
图 较 多 时 ， 这 一 方式 就 不 太 适 合 了 ， 开 发 者 容易 漏 看 某 一 张 图 ， 导 致 没有 修改 。 此 时 建 


议 整理 一 个 文档 ， 把 修改 意见 统一 放 到 一 个 文档 里 ， 推 荐 使 用 石墨 文档 或 者 其 他 在 线 协 
同 软 件 。 


问题 描述 位 置 。 ”截图 。 ”设计 稿 ”mW 区 发 修改 进度 。 ”复查 ”问题 描述 “WW 革 发 修改 进度 “复查 


LL cm my 


1. 字号 改 成 30px 


2. 间距 增 大 20px 下风 = 三 一 
按钮 颜色 需要 改 成 、 按钮 没有 
#ff7400 详情 页 le * 凡 击 态 a 


流程 顺序 错 了 ， 现 


在 是 132， 需要 改 人 done AAA 
成 123 (具体 参考 截 样 
图 ) 

验收 文档 


在 验收 文档 里 ， 需 要 包含 以 下 几 个 元 素 : 问题 描述 、 当 前 问题 出 现在 哪个 位 置 、 问 题 页 面 
截图 、 设 计 稿 截图 、PM/ 开 发 者 回复 、 修 改进 度 、 复 查 和 等， 具体 需要 放 哪 些 视 情 况 而 定 。 


整理 了 一 个 表格 之 后 ， 开 发 者 可 以 一 条 一 条 地 修改 ， 不 至 于 遗漏 ; 设计 师 也 能 直观 地 看 
到 开发 者 的 修改 进度 ， 以 及 哪些 地 方 改 不 了 ， 是 什么 原因 导致 的 ， 沟 通 起 来 更 顺畅 也 更 
高 效 。 


男 重 点 


在 后 期 视 党 验收 的 时 候 ， 我 们 可 以 换 位 思考 ， 把 目 己 当 作 开 上 友 者 ， 站 人 芷 他 们 的 角度 去 思考 
什么 样 的 验收 方式 会 更 方便 修改 。 例 如 设计 之 前 就 针对 分 割 线 、 小 屏幕 适 配 等 问题 想 好 解 
决 方案 ， 并 同步 到 开发 者 ; 在 一 轮 验收 时 把 修改 意见 标注 清楚 ， 整 理 成 验收 文档 。 


前 期 多 化 费 一 点 时 间 ， 能 有 效 帮 助 开 上 友 者 提高 工作 效率 ， 反 过 来 也 能 为 目 己 减少 二 次 验收 
的 时 间 成 本 。 
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05 ”组件 的 理性 选择 


文 / 付 钼 更 


在 设计 界面 时 ， 同 样 的 功能 可 以 用 不 同 的 样式 展示 ， 我 们 需要 知道 如 何 利 用 用 户 的 使 用 场 
景 来 选择 最 合适 的 设计 样式 。 


和 警告 框 与 操作 表 


1. 定义 


1 ) 警告 框 

警告 框 是 一 种 操作 上 的 确认 ， 只 有 当 用 户 点 击 按钮 后 才 算 真正 完成 ， 才 可 以 有 其 他 操作 。 
它 的 主要 作用 是 警告 或 提示 用 户 ， 由 三 部 分 组 成 : 标题 、 正 文 、 按 钮 。 有 些 简单 的 警告 或 
提示 只 有 正文 和 按钮 即 可 ， 如 下 图 所 示 : 


弹 窗 标题 
_ 可 ， 内 容 区 域 ， 具 体 描述 用 户 需要 做 
| 具体 描述 用 户 需 要 做 什么 样 的 什么 样 的 选择 


按钮 按钮 按钮 


2 ) 操作 表 

操作 表 是 从 屏 因 底部 边缘 向 上 滑 出 的 一 个 面板 ， 可 提供 2 个 以 上 的 选择 。 它 呈现 给 用 尸 的 
是 简单 、 清 晰 、 无 须 解释 的 一 组 操作 ， 没 有 描述 内 容 ( 大 部 分 ) 。 另 外 ， 重 要 的 功能 操作 
也 会 用 红色 文字 展示 ， 如 下 图 所 示 : 


第 2 章 ”能 力 效 率 提升 151 


重要 的 按钮 
按钮 按钮 
按钮 按钮 
取消 取消 


2. 如 何 选用 


1 ) 文字 内 容重 要 性 
选择 警示 框 和 操作 表 时 ， 要 考虑 的 是 弹 窗 文字 内 容 对 于 用 户 的 重要 程度 。 如 果 内 容 极 为 重 
要 则 选用 警示 框 ， 如 果 内 容 不 重要 甚至 不 需要 描 述 ， 就 应 该 选择 操作 表 ， 如 下 图 所 示 : 


序 件 彻 度 捧 队 后 将 不 可 恢复 
彻底 删除 


淘宝 QQ 邮箱 


淘宝 登录 密码 错误 上 时， 由 于 警示 框 可 以 更 突出 地 体现 文字 内 容 ， 帮 助 用 户 找 到 问题 所 在 ， 
所 以 选用 警示 框 。 再 看 QQ 邮箱 的 垃圾 箱 ， 点 击 全 部 清空 时 ， 由 于 信息 本 身 就 在 垃圾 箱 
内 ， 不 需要 对 用 户 进行 过 多 文字 提示 ， 用 户 直 接 操作 即 可 ， 所 以 最 后 选用 操作 表 。 


2 ) 用 户 操作 流畅 性 

当 我 们 需要 让 用 户 停止 操作 并 必须 点 击 当前 界面 的 按钮 时 ， 选 择 警示 框 。 警 示 框 对 用 户 操 
作 上 的 流畅 性 有 着 很 严重 的 影响 ， 如 果 提 示 不 需要 太 过 强硬 ， 我 们 就 选用 在 屏幕 中 任意 位 
置 点 击 就 会 消失 的 操作 表 ， 如 下 图 所 示 : 
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为 了 保障 您 正常 、 安 全 的 使 用 阿里 巴巴 服 
务 ， 请 您 允许 我 们 获取 和 您 的 相机 相关 权限 


去 授权 


阿里 巴巴 支付 宝 


阿里 巴巴 拍照 功能 中 ， 为 了 避免 用 户 有 其 他 操作 而 影响 当前 需要 解决 的 问题 ， 会 使 用 警示 
框 来 阻止 用 户 。 而 在 支付 至 中 ， 上 点 击 退出 登录 时 ， 为 了 避免 用 户 误 操 作 而 退出 ， 则 使 用 了 
操作 表 ， 用 户 可 以 通过 点 击 空 日 区 域 天 闭 操 作 表 。 


3 ) 按钮 数量 

这 是 最 容易 区 分 样式 的 因素 ， 当 弹 窗 中 的 按钮 数量 超过 2 个 时 ， 我 们 一 定 选用 操作 表 ， 因 
为 警示 框 的 按钮 数量 不 可 以 超过 2 个 。 如 果 数 量 一 样 ， 可 以 根据 上 面 两 点 择优 使 用 ， 如 下 
图 所 示 : 


推送 通知 
请 在 iPhone 的 “设置 ”- “通知 “中 找到 "得 
到 "应 用 进行 修改 ， 


知道 了 


阿里 巴巴 化 瓣 


在 得 到 App 中 点 击 开 通 “ 推 送 通 知 时， 因为 操作 按钮 只 有 一 个 ， 所 以 选择 警示 框 。 而 点 
击 微 博 中 的 “更 多 ”按钮 ， 用 的 则 是 操作 表 ， 因 为 操作 按钮 有 三 个 。 


标 釜 栏 与 工具 栏 


1. 定义 


1 ) 标签 栏 


标签 栏 位 于 屏幕 底部 ， 它 是 悬浮 在 当前 页 面 之 上 的 ， 并 且 会 一 直 存 人 芷 ， 只 有 当 用 户 点 击 跳 
转 到 二 级 菜单 后 才 会 消失 ， 如 下 图 所 示 : 


图 标 图 标 


用 户 可 以 在 不 同 的 子 任务 、 视 图 和 模式 中 进行 切换 ， 并 且 切 换 按钮 间 都 属于 不 同 的 内 容 。 
当 用 户 选 中 菏 个 标签 时 ， 该 标签 呈现 适当 的 高 亮 状 态 。 标 签 的 数量 也 有 限制 ， 不 能 超过 5 
个 ， 如 果 存 在 5 个 以 上 的 标签 ， 可 以 将 最 后 一 个 标签 设计 成 “更 多 ”标签 。 


2 ) 工具 栏 
工具 栏 同样 位 于 屏幕 底部 ， 悬 浮 在 当前 页 面 之 上 ， 只 是 当 用 户 不 需要 使 用 的 时 候 ， 可 以 隐 
藏 已 。 例 如 向 上 滑动 界面 时 ， 工 具 栏 会 自动 隐藏 。 工 具 栏 的 内 容 主 要 是 与 当前 页 面相 关 的 
操作 按钮 。 
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图 标 


2. 如 何 选 用 


1 ) 切换 状态 
当 我 们 需要 同 级 别 界面 切换 上 时， 应 该 选择 标签 栏 ， 同 时 标签 栏 的 切换 通常 为 一 级 导航 。 工 
具 栏 的 功能 仅 针对 当前 界面 内 容 的 相关 操作 ， 如 下 图 所 示 : 


微 信 读 书 - 标 签 栏 Safari- 工 具 栏 


微 信 读书 底部 栏 是 天 于 同 级 别 的 界面 切换 ， 所 以 选择 标签 栏 ， 同 时 标签 栏 也 是 该 产品 
的 一 级 导航 。 而 Safari 浏 览 器 底部 的 内 容 是 针对 当前 界面 的 操作 功能 ， 所 以 使 用 了 工 
具 栏 。 


2 ) 位 置 状态 


当 底 部 导航 始终 企 界 面 最 上 方 ， 上 下 滑动 都 不 会 消失 ， 则 选择 标签 栏 ; 如 果 底 部 导航 
上 滑 随 之 消失 则 选择 工具 栏 ( 也 有 少数 的 工具 栏 是 怎么 滑动 都 不 会 消失 的 ) ， 如 下 图 
所 示 : 


se0oo 中 国 移动 他 ; 下 午 8:05 7 eecoo 中 国 移动 今 六 ante sk 
8 a I eed 
推荐 ”热点 “小 说 ® 0 
mE iPhone11 将 于 下 月 10 日 发 布 ， 两 大 杀手 铀 
A oy Sy 曝光 ， 无 奈 价 格 感人 ! 


热 评 ， - 人 y iy 


小 视频 | 《沙漠 骆驼 》 走 了 ，《 狂 浪 》 
来 了 ， 热 情 奔 放 的 曲调 ， 太 酷 了 ! 


马 王 堆 出 土 的 两 件 “ 神 秘 "东西 ， 至 今 都 难 
得 ， 专 家 : 对 追 真 奢侈 


, 1 CE [ 
司 水 1 江 + 


王者 荣 炮 : 7 小 时 后 的 主宰 是 什么 样 ? 游戏 


实测 告诉 你 ， 结 
此 人 自称 正统 大 清 皇室 后 裔 ， 至 今 还 留 实测 告诉 你 ， 结 局 真 笑 了 
六 子 ， 为 保 血脉 拒 娶 普通 女子 


ee A 电 竟 陨 晴 圣 18:17 
.| 


百度 App- 标 釜 栏 Safari 百度 -工具 栏 


在 百度 的 App 中 ， 当 向 上 滑动 界面 时 ， 底 部 导航 的 位 置 是 不 会 消失 的 ， 所 以 使 用 了 标签 
栏 。 再 看 Safari 浏 览 器 ， 因 为 上 滑 时 底部 栏 会 被 隐藏 ， 所 以 选用 了 工具 栏 。 


3 ) 选中 状态 


当 用 户 选 中 底部 东 一 项 时 ， 如 果 需 要 高 亮 显 示 ， 且 显示 的 内 容 是 不 同 子 任务 的 视图 ， 则 使 
用 标签 栏 ; 而 当选 择 后 ， 出 现 操作 表 等 与 当前 界面 相关 的 操作 时 ， 应 该 选择 工具 栏 ， 如 下 
图 所 示 : 
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eeeco 中 国 移动 会 下 午 8:07 T 四 
推荐 搞笑。 ”小 视频 影视 直播 音乐 证 


林 忆 和 过 《不 必 在 乎 我 是 谁 少 开口 酬 
烟 嗓 迷 倒 全 场 


轻 点 以 通过 AirDrop 共享 


OONN 


十 好 剧 攻 略 由 关注 口 3 安 日 铂 更 jichen 的 iMac 。 安 现 的 iMac ”杜娟 的 Mac 。 刘 


费玉清 演唱 民 遂 歌 井 址 成 都 》， 悠 扬 歌 声 
让 全 场 观 众 沉 至 [ 


部 件 提 王 事项。 梁 加 到 -各 


克 上 oo 四 


着 呈 音乐 影 剧 志 固 关注 口 22 他 日 添加 到 个 人 收 。。 添加 书签 。 加 入 阅读 列表 。。 添加 到 


主屏 幕 


吉林 省 最 值得 期 待 的 城市 : 实力 仅 次 于 
> 


自 度 App- 标 签 栏 Safari 浏览 器 -工具 栏 


在 百度 App 中 ， 当 点 击 底 部 的 选项 时 ， 切 换 界 面 的 同时 当前 选中 的 “好 看 视频 ”需要 变 
成 选中 的 样式 ， 来 告知 用 户 当前 选中 的 是 哪个 界面 ， 所 以 使 用 了 标签 栏 。 再 看 Safari 浏 览 
器 ， 点 击 底部 按钮 后 出 现 操作 表 ， 且 当前 选中 的 按钮 也 不 会 变 高 亮 ， 也 不 会 切换 当前 界 
面 ， 所 以 选择 了 工具 栏 。 


Tabs 与 分 段 控 件 


1) Tabs 

Tabs 来 自 MD 规 范 ， 早 在 Android 2.0 时 代 ， 官 方 的 通讯 录 App 就 使 用 顶部 Tabs 导 
航 ， 可 以 滑动 切换 不 同 视图 。Tabs 里 的 Tab 呈 现 的 内 容 可 以 有 很 大 的 差别 ， 而 且 数 量 没 
有 限制 ， 其 不 能 作为 表单 的 单 选 组 件 。 


Tab1 a b4 Tab1 


2 ) 分 段 控件 


分 段 控件 是 iOS 原 生 控件 之 一 ， 每 个 分 段 作 用 是 互 斥 的 。 在 分 段 控件 里 ， 所 有 的 分 段 选项 
框 在 长 度 上 要 保持 一 至 ,iOS 规 范 中 规定 对 于 分 段 控 件 的 分 段 选项 不 得 超过 5 个 ， 每 个 分 
段 选项 可 以 是 文子 或 者 图 片 。 


eA a | 
WE 一 时 了 


2. 如 何 运用 


1 ) 来 源 不 同 
分 段 控件 来 自 ijOS 规 范 ， 而 Tabs 来 源 于 MD 规范 ， 如 下 图 所 示 : 


网 易 云 音乐 iOS 网 易 云 音乐 Android 


我 们 来 看 网 易 云 音乐 “我 的 消息 “界面 ，iPhone 中 因为 是 iOS 系 统 配置 的 应 用 ， 所 以 界面 
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中 切换 样式 用 的 是 分 段 控件 ， 而 反观 安 卓 系 统 则 用 的 是 Tabs 切 换 。 


2 ) 内 容 不 同 

分 段 控 件 主要 起 到 分 割 和 筛选 同类 数据 的 作用 ， 而 Tabs 则 没有 这 样 的 限制 ，Tabs 栏 里 的 
每 一 项 所 呈现 的 内 容 可 以 有 很 大 的 差别 。 另 外 ， 分 段 控 件 更 多 是 以 单 选 功能 出 现在 表单 的 
使 用 中 ， 而 Tab 则 不 能 作为 表单 的 单 选 组 件 ， 如 下 图 所 示 : 


关注 推荐 快讯 视频 科技 生活 三 


做 鱼 记 账 36 氟 


做 鱼 记 账 的 图 表 页 中 ， 支 出 、 收 入 为 整个 界面 的 展示 项 上 目 ， 为 了 让 用 户 碍 看 起 来 更 加 方 
便 ， 把 数据 分 割 为 周 、 月 、 年 的 不 同 数 据 展 示 ， 因 为 是 同类 数据 切换 ， 所 以 选择 了 分 
段 控件 。 反 观 36 氮 首页 的 Tabs 栏 ， 每 一 项 内 容 的 差别 都 很 大 。 


3 ) 操作 方式 不 同 
分 段 控件 需要 点 击 操作 ， 而 Tabs 除 了 点 击 外 还 可 以 通过 左右 滑动 切换 不 同 视图 ， 如 下 图 
所 示 : 
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各 东 金 融 小 红 书 


京东 金融 App 某 产品 近 七 日 年 化 的 表单 是 极为 近似 的 趋势 图 ， 不 易 让 用 户 侧 滑 屏幕 切换 ， 
需要 让 用 户 更 精准 地 点 击 选择 ， 所 以 使 用 了 只 能 点 击 的 分 段 控件 。 而 小 红 书 的 切换 页 变化 
都 比较 明显 ， 很 容易 区 分 ， 所 以 选择 了 可 以 侧 滑 屏幕 切换 的 Tabs 。 


4 ) 数量 

分 段 控件 数量 不 能 超过 5 个 ， 而 Tabs 没 有 数量 限制 。 例 如 ， 网 易 云 音乐 中 的 消息 界面 因为 
分 类 的 数量 未 超过 五 个 ( 不 是 所 有 未 超过 五 个 的 就 要 用 分 段 控件 ， 同 时 也 要 根据 以 上 说 的 
其 他 三 种 情况 判断 ， 这 里 只 针对 数量 阐述 而 已 ) ， 所 以 可 以 使 用 分 段 控件 ; 而 网 易 云 音乐 
视频 界面 中 因为 分 类 数量 过 多 且 内 容 上 有 了 区别， 所 以 选择 了 Tabs。 


暂 无 私信 


茜 依 林 《特务 J》 现 场 版 ， 妖 男 伴舞 太 抢 戏 | 
mr (3 BB” © 
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Toast 与 Snackbar 


1. 定义 


1 ) Toast 
Toast 通 常 出 现在 顶部 和 中 部 ， 浮 于 页 面 上 方 ， 无 法 对 其 操作 ， 出 现 一 段 时 间 后 便 会 消 
失 ， 并 且 在 此 期 间 不 影响 其 他 正常 操作 ， 如 下 图 所 示 : 


已 更 新 成 功 Vv 
已 更 新 成 功 


2) Snackbar 


Snackbar 出 自 安 卓 系 统 ， 是 安 卓 系统 的 特色 弹 窗 之 一 。 根 据 官方 定义 它 是 不 存在 图 片 
的 ， 但 随 着 产品 功能 的 不 断 优 化 ， 现 在 产品 中 也 存在 带 有 图 片 的 Snackbar。 它 是 由 一 段 
信息 和 一 个 按钮 组 成 ， 它 们 会 在 超时 或 者 用 户 触 碰 屏 幕 其 他 地 方 后 自动 消失 。Snackbar 
也 可 以 在 屏幕 上 滑动 关闭 ， 不 会 妨碍 用 户 对 产品 的 其 他 操作 ， 如 下 图 所 示 : 


2. 如 何 选 用 


1 ) 操作 不 同 
Toast 弹 窗 没 有 任何 操作 键 ， 而 Snackbar 是 有 操作 键 的 ， 如 下 图 所 示 : 


四 守信 


二 我 属 蛇 还 天 蝎 库 GD .… 


由 251 跨 6 蜂 首 游记 。 


十 二 月 。 圣诞 去 北极 做 一 个 
追 光 者 【丹麦 芬兰 瑞典 挪威 
北欧 4 国 圣诞 老人 村 极 


加 1923 器 2m 安 14 


马蜂 离 


下 午 8:16 了 和 
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下 午 7:41 了 了 0 
发 现 


小 红 书 


马蜂 膏 App 中 的 文章 点 赞 功能 只 需要 告知 用 户 点 赞 已 成 功 即 可 ， 不 需要 其 他 操作 ， 所 以 选 
用 Toast 弹 窗 ; 而 小 红 书 中 当 进 入 发 现 界面 点 击 收藏 时 ， 会 出 现 引 导 用 户 到 专辑 分 类 中 去 


的 浮 层 。 


2 ) 消失 状态 不 同 


Toast 弹 窗 完全 是 通过 超时 后 自动 消失 ， 不 存在 任何 操作 ; 而 Snackbar 可 以 超时 消失 也 


可 以 让 用 户主 动 上 滑 关 | 尺 ， 如 下 图 所 示 : 


穷人 到 底 能 不 能 富 养 出 气质 不 LOW 的 高 贵 孩 
子 ? 

说 实话 ， 这 不 是 我 本 来 想 的 标题 ， 但 是 在 这 种 垃圾 
信息 炸 虱 的 时 代 ， 为 了 让 更 多 人 看 见 我 的 一 点 点 .- 


原油 SEE 3 甘油 
- 
HH fo | ; 


人 @@ 你 是 每 么 遇 到 你 最 好 的 朋友 的 ? 


DD 
高 敏感 人 群 

写 给 内 向 高 敏感 人 群 一 一 提升 能 量 的 三 个 方 

by 


高 敏感 这 个 词 ， 往 往 趾 容易 感到 疲劳 、 
外 不 安 、 犹 瑰 不 决 、 自 我 压抑 等 情结 联系 在 一 


ad4 工 加 4 和 了 隐 让 高 人 不 儿 浊 rt 大 让 Ew 


合 


~ 
| 


[4 


小 红 书 


162 UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


豆 闪 App 广 播 界 面 中 ， 当 总 击 刷 新 后 ， 更 新 的 内 容 会 自动 出 现在 最 前 面 ， 用 户 不 需要 任 
何 操作 就 可 以 看 到 内 容 ， 所 以 选用 无 操作 必须 等 竺 超时 后 才 会 消失 的 Toast 弹 窗 。 而 携程 
App 中 的 酒店 界面 ， 因 为 更 多 精彩 的 内 容 在 下 面 ， 并 没有 展示 出 来 ， 为 了 不 让 用 户 在 滑动 
浏览 时 造成 视觉 障碍 ， 所 以 选择 了 Snackbar， 除 了 超时 后 自动 关闭 外 ， 也 可 以 通过 滑动 
界面 让 弹 窗 主动 天 闭 。 


3 ) 组 成 元 素 不 同 


Toast 弹 窗 主 要 是 由 文字 和 背景 组 成 ， 也 可 以 额外 附加 图 标 。 而 Snackbar 除 文字 、 背 
景 、 图 标 外 还 有 操作 键 ， 如 下 图 所 示 : 


eeo0o0 中 国 移动 他 下 午 8:09 TE 
' 设置 

帐号 / 绑 定 设置 

推送 消息 设置 


播放 音质 选择 

使 用 听 简 播放 音 YA 
已 清除 缓存 

给 软件 打分 

清除 缓存 

关于 我 们 


退出 登录 


得 到 小 红 书 
得 到 App 中 只 需要 提示 即 可 ， 所 以 选用 Toast， 组 成 元 素 为 背景 、 文 字 、 图 标 ， 而 小 红 书 
App 需 要 加 入 操作 键 ， 所 以 选择 了 Snackbar。 


男 重 点 


(1) 警告 栏 与 操作 表 : 警告 栏 是 一 种 操作 上 的 确认 ， 只 有 当 用 户 点 击 按钮 后 才 算 真 的 完 
成 ， 才 可 以 有 其 他 操作 。 主 要 作用 是 警告 或 提示 用 户 。 而 操作 表 是 常会 从 屏幕 底部 边缘 癌 
上 滑 出 的 一 个 面板 ， 可 提供 2 个 以 上 的 选择 。 


(2) 标签 栏 与 工具 栏 : 标签 栏 位 于 屏幕 底部 ， 悬 浮 在 当前 页 面 之 上 ， 并 且 会 一 直人 存在 ， 
只 有 当 用 户 点 击 跳 转 到 二 级 菜单 后 才 会 消失 。 而 工具 栏 同 样 位 于 屏幕 底部 ， 悬 浮 企 当前 页 
面 之 上 ， 当 用 户 不 需要 使 用 的 时 候 ， 可 以 隐藏 。 


(3 ) Tabs 来 自 MD 规 范 ， 早 在 Android 2.0 时 代 ， 官 方 的 通讯 录 App 就 使 用 顶部 Tabs 
导航 ， 可 以 滑动 切换 不 同 视 图 。 而 分 段 控 件 是 iOS 原 生 控 件 之 一 ， 每 个 分 段 作 用 是 互 斥 
的 ， 在 分 段 控 件 里 ， 所 有 的 分 段 选项 框 在 长 度 上 要 保持 一 致 ， 选 项 不 得 超过 5 个 ， 可 以 是 
文字 或 者 图 片 。 


( 4 ) Toast 通 常 出 现在 顶部 和 中 部 ， 浮 于 页 面 上 方 ， 无 法 对 其 操作 ， 出 现 一 段 时 间 后 便 会 
消失 ， 并 且 在 此 期 间 不 影响 其 他 正常 操作 。 而 Snackbar 出 自 安 卓 系统 ， 是 安 卓 系统 的 特 
色 弹 窗 之 一 ， 它 是 由 一 段 信 息 和 一 个 按钮 组 成 ， 它 们 会 在 超时 或 者 用 户 在 屏幕 其 他 地 方 触 
碰 后 自动 消失 。Snackbar 可 以 在 屏幕 上 滑动 关闭 。 


往往 看 似 相同 的 组 件 ， 其 使 用 场景 是 干 差 万 别 的 。 每 个 组 件 都 有 不 可 蔡 代 的 作用 。 


参考 资料 
iOS 和 Android 规 范 解析 


标签 导航 和 分 段 控 件 ”http://t.cn/Efi6F7h 
正确 使 用 控件 -警告 框 ”http://t.cn/EfiXazl 

iOS 9 人 机 界面 指南 (四 )Ul 元 素 http://t.cn/RGIIkVF 

App 设 计 中 ，6 组 常见 组 件 的 区 别 与 用 法 http://t.cn/RTia2tu 

这 个 控件 叫 : Segment Control/ 分 段 控件 〈 附录 与 Tabs 的 区 别 ) ”http://t.cn/Efii1PR 


警告 框 和 操作 表 ( Action Sheet ) http://t.cn/EfiaMfC 
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06 倾 阶 相 授 Sketch 使 用 的 小 
拉 巧 


现在 越 来 越 多 的 人 选择 用 Sketch 来 做 Ul 界面 ， 它 相 比 PS 来 说 ， 功 能 更 高 效 ， 可 以 说 是 
专 为 界面 设计 而 生 ”。 如 果 把 做 界面 比 作 前 苹果 ， 那 么 PS 是 一 把 茎 头 ，Sketch 则 是 水 
果 刀 ， 痉 头 能 做 很 多 事情 ， 但 是 对 于 削 苹 果 这 件 事 情 来 说 ， 却 很 麻烦 ， 不 如 水 果 刀 好 用 。 


而 且 Sketch 学 习 成 本 很 低 ， 基 本 一 两 天 就 能 上 手 ， 加 上 它 非 常 开放 ， 支 持 第 三 方 插 件 ， 这 
就 催生 了 很 多 各 式 各 样 的 插件 ， 方 便 设计 师 使 用 ， 提 高 了 设计 师 的 工作 效率 。 下 面 从 两 个 
方面 介绍 一 些 工 作 中 会 用 到 的 Sketch 小 技巧 : 


(1 ) 软件 自 带 功能 : 


新 建 男 板 、 加 减 乘 除 、 不 透明 度 、 快 速 查 看 间距 、 移 动 微调 、 图 层 重 命名 、 打 组 / 解 组 、 快 
速 选择 、 智 能 选择 、 旋 转 复制 、 画 板 目 适应 、 画 板 折 填 、 设 置 快捷 键 、 文 本 样式 、 图 层 样 
式 、 图 片 导 出 、Symbols 。 


(2 ) 第 三 方 插件 : 


Sketch measure、Font-Packer-master。 


软件 目 市 功能 


很 多 人 只 知道 Sketch 有 很 多 揪 件 ， 却 不 知道 它 有 很 多 自 带 的 功能 也 非常 好 用 ， 不 亚 于 那些 
插件 。 


1. 新 建 画 板 
当 你 刚 打 开 软 件 的 时 候 ， 想 要 新 建 一 个 画板 ， 可 以 按 字母 A， 鼠 标 指针 就 会 变 成 一 个 
十 号 ， 可 以 自己 随意 框 选 画板 的 尺寸 ; 也 可 以 直接 用 界面 右 侧 提供 的 常用 设备 的 尺 
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寸 , 如 iPhone 8、iPhone XS 等 。 


Apple Devices | 口 Android Devices = 芽 其 口 


IPHONE COMMON MOBILE 
iPhoneB 375x667 国 Android 360x640 
iPhone 8 Plus 414x736 0 Pixel 2 412x732 
周 iPhonesE 320x568 国 pixel2 xL 360x720 
品 iPhone XS 375x 812 0 Galaxy S8 360x740 
国 iPhonexR 414x896 RE 

0 Nexus 7 600x960 
品 iPhone XS Max 414x896 
国 Pad 768x1024 国 Nexus10 800x1280 
口 iPad Pro 1024x1366 CHROMEDOOK 


APPLE WATCH 加 pixel 


Apple Watch 38mm 11 


不 过 直接 在 右 侧 选择 预 设 的 尺寸 时 ， 画 板 的 位 置 是 固定 的 ， 没 办 法 把 画板 新 建 到 指定 的 地 
方 。 这 个 时 候 我 们 可 以 用 鼠标 直接 框 选 画板 ， 然 后 再 在 右 侧 调 整 画 板 大 小 。 


2. 加 减 乘除 
做 界面 的 时 候 经 常会 出 现 这 样 的 情况 要 把 一 个 图 形 三 等 分 、 四 等 分 ， 或 者 说 加 上 30px、 
40px， 这 时 候 如 果 手 动 去 计算 ， 然 后 再 输入 ， 很 瀛 费时 间 成 本 ， 而 且 对 于 数学 不 好 的 人 来 
说 ， 还 容易 算 错 。 


其 实 Sketch 就 自 带 一 些 快捷 方法 ， 在 右 侧 尺寸 大 小 的 面板 处 ， 可 以 直接 在 尺寸 后 输入 
+ 一 ” “/” ， 后 面 跟 上 数字 ， 输 完 之 后 确定 ， 就 可 以 得 到 想 要 的 计算 结果 了 。 


-36750 Xx 33818 YY 0 和 -36750 x 33818 YY 0 


加 减 乘除 


3. 不 透明 度 
当 要 改变 一 个 元 素 的 不 透明 度 上 时， 可 以 直接 按 数 字 键 来 调整 。 例 如 ， 你 想 把 不 透明 度 改 到 
65%， 那 么 选中 这 个 元 素 后 ， 和 直接 按 数字 65; 当 不 透明 度 是 整数 的 时 候 ， 只 需要 直接 输 
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入 数字 6， 束 可 以 将 不 透明 度 调 整 到 60%。 


4. 快速 查看 间距 


都 说 做 UI 是 在 跟 像素 打交道 ， 界 面 中 各 个 地 方 的 参数 大 小 都 不 能 有 误差 。 有 时 候 我 们 
就 需要 快速 查看 两 个 元 素 之 间 的 间距 大 小 ， 看 看 是 不 是 统一 。 选 择 其 中 一 个 元 素 ， 按 住 
Option 不 放 ， 鼠 标 指针 移 到 另 一 个 元 素 上 ， 束 可 以 看 到 两 者 之 间 的 间距 了 。 


Step 1. 选中 一 个 元 素 
Step 2. 按 住 Dption 不 放 
Step 3. 鼠标 指针 移 到 另 一 个 元 素 上 


5. 移动 微调 

大 多 数 人 只 知道 按 住 Shift 不 放 ， 选 择 “ 上 ”“ 下 ”“ 左 ”“ 右 ”可 以 向 各 个 方向 快速 移 
动 10px， 但 其 实 10px 这 个 是 可 以 更 改 的 。 对 于 移动 端 来 说 ， 普 遍 都 会 把 参数 设 成 8 的 
倍数 ， 那 么 微 移 10px 来 说 显然 不 是 那么 合适 ， 微 移 完了 之 后 还 得 再 调整 一 下 。 可 以 选 
择 Sketch-Preferences-Canvas， 把 移动 对 象 的 数值 由 10px 改 成 8px， 或 者 任意 你 想 
要 的 参数 。 


六 Preferences 
回首 回民 太一 和 
About & Registration... ee EP 
Zoom: @ Animate zoom 
和 
Zoom back to previous Canvas position 
Services FP » When zooming back to Actual Slze, by default Sketch 
Doms out from the center. Instead i can also zoom bac 
be like how it was before 
Hide Sketch 8H 
Hide Others eH Nudging: Move objects 1 px using Arrow keys 
Show All Move objects 8 px using Shift-Arrow keys 
Quit Sketch %Q Colors: 一 - Ll 
ot A 
移动 微调 
1 户 > -~ 
6. 图 层 重 命名 


双击 图 层 或 者 按 住 快 捷 键 Command+R， 可 以 为 图 层 重 命名 。 


7. 打 组 / 解 组 
按 下 快捷 键 Command+G/Command Shift +G， 可 实现 打 组 / 解 组 。 


8. 快速 选择 

当 我 们 把 很 多 元 素 都 打 组 之 后 ， 想 要 快速 选择 组 内 的 元 素 时 ， 常 用 的 方法 是 双击 元 素 ， 但 
如 果 组 谱 套 得 特别 多 的 话 ， 就 很 难 选 中 了 。 这 个 时 候 可 以 用 快捷 键 帮助 我 们 快速 选择 : 按 
住 Command 不 放 ， 同 时 单 击 该 元 素 。 


9. 智能 选择 

当 很 多 元 素 混在 一 起 的 时 候 ， 如 果 只 想 选中 其 中 的 几 个 ， 一 下 子 框 选 会 很 容易 选 到 不 想 选 
中 的 ， 这 时 候 智能 选择 就 派 上 用 场 了 ， 按 住 Option 不 放 ， 同 时 用 鼠标 框 选 元 素 ， 最 终 只 
有 全 部 被 框 选 的 元 素 才 会 被 选中 。 


” 


10. 旋转 复制 


记得 刚 开始 用 Sketch 的 时 候 ， 一 直 都 不 知道 怎么 旋转 复制 ， 都 是 在 人 Ai 里 做 好 导入 进来 ， 后 
来 才 友 现 Sketch 是 有 这 个 功能 的 。 


| 0 
/\ 
旋转 复制 
11. 画板 目 适 应 


设计 稿 的 尺寸 超过 一 屏 的 时 候 ， 它 的 高 度 是 根据 内 容 变 化 的 ， 没 有 一 个 固定 值 ， 所 以 
做 的 时 候 一 般 都 是 先 把 元 素 排 好 ， 然 后 再 手动 调整 画板 的 大 小 。 但 很 多 时 候 容 易 出 现 
几 像 素 的 误差 ， 这 时 候 束 可 以 用 软件 自 带 的 功能 来 调整 尺寸 大 小 : Layer-Artboard- 
Resize to Fit Content。 其 实 可 以 把 常用 的 功能 设置 成 快捷 键 ， 后 面 会 具体 说 到 。 


12. 画板 折 双 
想 要 折 茎 左 侧 画板 的 时 候 ， 可 以 选择 View-Layer List-Collapse All Groups。 


13. 设置 快捷 键 


Sketch 里 有 些 自 带 的 功能 有 快捷 键 ， 但 是 很 多 常用 的 功能 却 没有 ， 例 如 上 面 说 到 的 画板 
自 适应 、 画 板 折 寺 ， 我 们 可 以 自己 设置 : 系统 偏好 设置 -键盘 -快捷 键 -添加 -选择 应 用 程 
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序 、 输 入 菜单 标题 、 设 置 键盘 快捷 键 -添加 。 这 里 所 写 的 菜单 标题 对 应 Sketch 里 的 功能 命 
名 ， 必 须要 完全 一 样 ， 这 样 设置 的 快捷 键 才 会 生效 。 


HN we ] 
| 
大 CE LL 
um Ful wes x 
ene 
RE un 
a 
共和 信 污 - 
”和 二 
© mn 
we 
© We 


设置 快捷 键 


14. 文本 样式 

这 个 融 相 当 于 一 个 全 局 统一 的 样式 ， 仅 针对 字体 。 当 我 们 定义 好 产品 内 所 用 的 字号 〈 例如 
一 级 标题 、 二 级 标题 、 正 文 的 字号 ) 之 后 ， 就 可 以 把 它 做 成 文本 样式 ， 后 续 其 他 页 面 需要 
用 到 时 直接 调用 即 可 。 这 样 可 以 防止 其 他 页 面 的 参数 出 错 ， 和 之 前 的 不 统一 。 


海盐 社 所 学 及 所 思 下 全 > 海盐 社 所 学 及 所 思 ee- 二 
二 = 
新 建文 本 样式 命名 文本 样式 


当 要 修改 的 时 候 ， 可 以 只 修改 一 处 ， 单 击 刷 新 ， 就 可 以 同步 修改 所 有 用 到 这 个 样式 的 


字体 。 
人 err Aa xmw 
海盐 社 所 学 及 所 思 NE » 海盐 社 所 学 及 所 思 -Ne 
棋子 的 禁 子 和 橙子 的 橙子 cr 
2 Peover my 
修改 文本 样式 批量 同步 文本 样式 


15. 图 层 样 式 
这 个 和 文本 样式 是 一 样 的， 不 过 它 针对 的 是 图 层 。 
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16. 图 片 导出 

当 我 们 用 2 倍率 作 图 的 时 候 ， 最 后 导出 切 图 会 友 现 切 图 的 后 缀 名 不 对 ， 导 出 1 倍率 才 是 实际 
的 2 倍率 图 ， 导 出 1.5 倍 率 才 是 实际 的 3 倍率 图 ， 但 是 它 的 后 缀 却 是 @1x、@2x， 容 易 让 人 
误解 。 这 个 时 候 ， 只 需要 做 一 点 小 小 的 改变 就 可 以 避免 这 个 情况 了 。 


在 软件 界面 的 右 下 角 选 择 Edit Presets ( 编辑 预 设 ) ， 把 默认 里 的 导出 参数 的 后 缀 名 改 一 
下 ，1 信 和 率 图 的 后 经 名 改 成 @2x，1.5 信 和 率 图 的 后 缀 名 改 成 @3x。 


J 
导出 一 ps 十 Default Goneral Comvys Layers Pa Data USrarise pres Clsud 
i Presets ean be app Mtboards, snd eypertable Wyers 
和 A Druitt 
x je ~ pe Jx A PET 
» V 切片 预 设 2 » os 
1.5X @1.5x Y PNG 并 Andreid ,a ys png 
Remove All Export Options um mn re 
大 小 前 岗 / 后 提 格式 Sice Presyel 
Create Preset... 
导出 Bitmap... 由 Edit Presets... 


图 片 导出 


17. Symbols 


众所周知 ，Sketch 最 高 效 的 功能 就 是 组 件 化 界面 中 所 使 用 的 元 素 ， 设 计 师 可 以 把 同一 个 界 
面 出 现 的 相同 内 容 都 做 成 组 件 ， 方 便 后 期 直接 调用 ( 自 带 功能 ， 不 是 插件 ) 。 


下 面 以 App 底部 标签 栏 为 例 ， 详 细 说 明 下 Symbols 的 用 法 : 


首先 ， 把 红 框 处 每 一 个 内 容 都 单独 做 成 组 件 〈 选中 元 素 ， 创 建 组 件 即 可 ) 。 
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再 把 整个 标签 栏 做 成 Symbols ， 当 后 期 需要 改变 状态 时 ， 只 需要 在 右边 更 换 即 可 。 


:Oss | 1 
v Dm 多 机 ~ 是 本 
WE 目 sr 
| @ aas 


不 过 需要 注意 的 是 ， 元 素 想 要 切换 成 其 他 元 素 时 ， 必 须 保证 这 两 个 元 素 的 大 小 完全 一 
臻 ， 其 次， 修改 文字 时 ， 也 要 考虑 文字 显示 的 咒 度 ， 需 要 把 默认 显示 范围 设置 成 最 大 显 


示 泄 围 。 


首页 
文字 默认 显示 范围 


第 三 方 插件 


1. Sketch measure 


1 ) 字体 

Sketch measure 是 非常 好 用 的 一 款 切 图 标注 插件 。 很 多 人 在 标注 字体 的 时 候 ， 可 能 会 
现 这 种 情况 : 文字 密密麻麻 的 ， 所 有 的 参数 都 出 现 了 ， 但 其 实 和 仔细 看 会 发 现 很 多 参数 都 不 
需要 ， 还 占 地 方 。 


ayer-NamMme. 海盐 社 : 所 写 即 所 拒 


OIOFf. ##*、 
opacity: 100% 
海盐 社 所 写 印 所 思 ont-size: 150px 
0 ce: PingFangSC-Regular 
character: OpX 
line: 210px (1.4) 


刚 开始 遇 到 这 种 情况 ， 我 都 是 手动 把 不 需要 的 删除 ， 直 到 后 来 才 发 现 有 快捷 键 。 我 们 只 需 
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效率 提升 


要 在 标注 的 时 候 按 住 Alt 键 ， 再 单 击 标注 ( 红 框 处 ) 就 会 出 现 调整 参数 的 界面 ， 可 以 选择 需 
要 标注 的 种 类 ， 以 及 标注 信息 所 显示 的 方位 。 


gp 口 个 


边框 
不 透明 度 
国 角 


外 (内 ) 阴 影 


2 ) 自动 导出 


字号 
字体 

字 间 距 
行 高 
段落 间距 
样式 名 称 


如 果 每 个 页 面 都 手动 标注 的 话 ， 人 力 成 本 太 大 ， 所 以 可 以 用 上 自动 导出 与 手动 标注 相 结 合共 
方式 ， 把 重要 的 、 容 易 忽 略 的 信息 手动 标注 一 下 〈 如 小 屏幕 息 么 适 配 等 ) 那些 重复 性 的 工 


作 都 可 以 交 给 目 动 导出 。 


WP Mockinyeo! 有 

向 Fons Packer v1.21 » 

pd Name Orgarw2er ~N 

Albstract » 

Chromatic Sketch » 

Clipboard 月 » 

Compo La 

HoeloFontSotFont ” 

Paddy bp 

TR ‘08 

Unspiash 全 工具 柱 20(betaj 个 OX 

Run Sorint. OK 标注 区 十 ”个 1 
标 违 尺 才 ~02 

Manage Plugins 标注 间 也 | 
标注 属 牧 04 
标注 备注 人 5 
设置 切 图 Qs 
频 色 命名 "OC 
切 搜 隐藏 “个 H 
切换 和 恒定 ~ 人 Ol 
清 辽 绩 注 
设置 
先 峻 作者 
埠 盈 本 


99 Bad 便 用 小 盾 
回 0 

| 
= 
局 状 这 使 用 ma 

Cioud 云 售 Set ne html evew 
办: 应用 醒 主 

和 主 让 

Ou 
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2. Font-Packer-master 


工作 中 经 常会 遇 到 这 种 情况 当 你 把 文件 发 给 其 他 人 的 时 候 ， 对 方 收 到 后 弹出 各 种 没有 字 
体 的 提示 ， 然 后 软件 还 会 自动 替换 成 其 他 的 了 字体。 而 现在 有 了 Font-Packer-master 插 件 
融 能 避免 这 个 问题 了 ， 我 们 可 以 把 页 面 所 用 的 字体 一 起 打包 友 给 其 他 人 。 


原型 ”排列 | 插件 | 显示 窗口 帮助 S09 国 第 41 央 _sknwtch 伙 用 小 给 1 


四 和 人 
网 国 S 投 地 - PP 
加 生 近 华 用 
) iCioud 去 家 res 
600 A ny 用 小 接 15 smth 
Dan 
加 文 质 
Oru 
Ey] Croetive Coud 
品 合 
| 
a 
佑 灯 色 
全 杭 名 
-» 
LEE Ml forts 
< 四 Drmviy- ~ 天 
个 人 驳 榴 Eee 汉人 地 
同 国 补 机 过 
es Ag Ag Ag A 
< iCioud 云 鲁 HelvetkcafeveiF 1MFUHeLNeneom (PagargSc- PFangse ”PingFangSC- 
heicsNee se rencl-_ gdmron Unipnofeng se: Mod Fong se pegpuari Fanghr 
从; 应 用 三 序 
eg 
后 文风 
© ru 
BY Crostive Cioud . 
EL 
全 | 过 用 元 全 
卿 民 起 居 
名 村 色 
筷 楼 色 
磺 伏 鱼 
号 
团 量 总 


以 上 就 是 我 芷 用 Sketch 时 总 结 的 一 些小 技巧 。 最 后 我 想 要 说 明 的 一 点 是 ， 虽 然 Sketch 的 
插件 很 多 ， 琳 下 满 目 ， 但 是 我 们 要 学 会 从 中 找到 适合 目 己 的 ， 在 不 影响 最 终 界面 效果 的 前 
提 下 ， 提 高 工作 效率 。 当 一 个 插件 对 界面 效果 以 及 工作 效率 没有 太 大 帮助 的 时 候 ， 那 它 就 
并 不 适合 自己 。 


说 一 句 老 生 常 谈 的 话 : 要 想 做 出 好 作品 ， 关 键 不 在 于 工具 ， 而 在 于 想法 。 
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07 那 蔚 你 不 知 通 的 好 用 软件 


文 / 吴 萌 


选择 对 了 工具 ， 就 成 功 了 一 半 。 可 是 很 多 人 并 没有 意识 到 这 一 点 ， 还 是 习惯 于 用 上 自己 最 顺 
手 的 工具 ， 不 愿意 去 改变 。 换 个 角度 想 想 ， 互 联网 友 展 得 这 么 快 ， 很 多 跟 不 上 时 代 上 友 展 的 
东西 都 会 被 淘汰 ， 在 没有 Sketch 之 前 ， 大 家 用 PS 做 Ul; 有 了 Sketch 之 后 ， 工 作 效率 提升 
很 多 。 既 然 迟 早 都 会 改变 ， 那 为 什么 我 们 不 做 最 早 吧 螃蟹 的 那 一 拔 人 呢 ? 


下 面 就 从 不 同方 面 来 分 别 介 绍 一 些 好 用 的 软件 ， 这 些 都 是 实际 工作 中 会 常用 的 : 


@ 在 线 协同 


石墨 文档 

@ 图 片 管理 一 一 Eagle 

@ 云 仔 储 一 一 坚果 云 

@ 高 保 真 交 互 原型 一 一 Protopie 


@ 动 效 制作 及 输出 一 一 AE+Lottie 


在 线 协同 一 一 石墨 文档 


石墨 文档 是 一 款 轻 便 、 简 洁 的 在 线 协 作文 档 工 具 ，PC 端 和 移动 端 全 覆盖 ， 支 持 多 人 同时 
对 文档 编辑 和 评论 ， 让 你 与 他 人 轻松 完成 协作 拟稿 、 方 案 讨 论 、 会 议 记 录 和 资料 共享 等 工 
作 。PC 冰 支持 macOS 和 Windows 系 统 ， 和 移动 端 支持 IOS、Android 及 微 信 小 程序 。 


石墨 文档 可 以 把 目 己 的 文件 分 享 给 其 他 人 ， 当 需要 协作 的 是 文件 夹 时 ， 没 有 分 享 功能 ， 只 
能 为 当前 文件 夹 添加 协作 者 。 添 加 后 文件 夹 的 所 有 者 可 以 设置 他 人 的 权限 ， 协 作者 删除 文 
件 只 会 退出 文件 共享 ， 对 原文 件 没有 任何 影响 。 后 续 文 件 夹 内 新 增 内 容 ， 也 会 直接 同步 给 
所 有 该 文件 的 协作 者 。 
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4 人 协作 
a 栓 子 的 检 子 (我 ) ad 退出 共享 
3 
你 不 是 文档 的 创建 者 
@ ns — 继续 此 操作 会 退出 文档 共享 
但 不 会 删除 文档 
全 Jaept Errrry 四 


约 适 加 纲 信 好 友 


图 片 管理 一 一 Eagle 


Eagle 是 一 款 图 片 收集 软 件 ， 相 当 于 本 地 的 花 准 。 安 六 浏 必 器 扩展 插件 后 ， 无 需 下 载 图 
请， 只 需要 简单 地 下 拉 、 拖 昌 束 可 以 完成 图 片 的 收集 。 加 上 图 片 是 保存 侍 本 地 ， 所 以 即使 
没有 网 络 的 时 候 也 能 查看 。 可 配合 坚果 云 使 用 ， 让 两 台 计 算 机 之 间 的 文件 实时 同步 。 支 持 
macOS 和 Windows 系统 。 


1. 导入 花瓣 画板 

该 工具 可 以 一 键 导入 花瓣 里 的 图 片 。 不 过 需要 注意 的 是 ， 花 瓣 地 址 必须 写 单个 画板 的 地 
址 ， 不 然 会 显示 网 址 无 效 。 此 外 ， 不 只 是 可 以 导入 自己 的 单个 画板 ， 还 可 以 导入 别人 的 画 
板 。 要 是 看 到 哪个 花 准 用 户 的 图 片 特别 好 ， 可 以 直接 将 其 导入 。 


各 “Eagle 资源 库 有 :4, 滑 编辑 查找 显示 窗口 帮助 
人 DB 导入 花 庆 网 图 片 


创建 文件 夹 
创建 智能 文件 夹 民 


导入 Eagle Pac 


2. 整理 素材 库 
采集 好 的 图 片 可 以 按照 文件 夹 的 形式 进行 整理 ， 下 图 是 我 自己 所 列 的 文件 夹 目录 。Eagle 
还 可 以 为 文件 夹 选择 不 一 样 的 颜色 ， 且 支持 多 重 条 件 筛选 图 片 。 
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云 和 存储 一 一 坚果 云 


坚果 云 是 一 款 云 盘 同 步 软件 ， 卉 比特 度 云 盘 的 升级 版 。 它 可 以 同步 计算 机 任何 位 置 的 文件 
夹 ， 不 用 像 icloud 一 样 ， 要 把 文件 夹 拖 到 制定 地 方才 能 同步 。 而 且 还 支持 协作 ， 你 可 以 和 
其 他 人 共同 维护 一 个 文件 来， 实时 同步 修改 内 容 。 它 支持 macOS 和 Windows 系 统 ， 移 动 
端 支 持 OS 和 Android 系 统 。 


1. 两 人 台 计 算 机 文件 实时 同步 
安装 坚果 去 后， 计算 机 内 的 任何 一 个 文件 夹 右键 都 会 出 现 坚果 云 的 选项 ， 单 击 同步 到 个 人 
空间 ， 等 待 同步 完成 ， 就 可 以 在 客户 端 内 看 到 该 文件 夹 。 


文件 夹 右 键 开始 同步 
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当 想 要 把 客户 新 的 文件 同步 到 另外 一 台 计 算 机 的 时 候 ， 可 单 击 客 尸 端的 对 应 文件 夹 后 面 的 
设置 ， 选 择 一 下 同步 到 本 地 的 路 径 ( 红 框 处 ) 。 这 样 文件 里 的 内 容 被 一 个 设备 修改 ， 也 会 
实时 同步 到 另 一 个 设备 上 。 


号 我 的 同 抄 文件 正 
管理 我 的 同步 文件 奖 
坚果 云 允许 您 诅 置 多 个 同 出 文件 普 ， 并 可 与 时 丰 同 步 
提示 : 双击 打开 ， 友 地 点 击 且 示 纲 作 铅 单 
创建 省 
于 文件 1 您 
a 手机 图 片 如 二 > i 
网 文人 4 您 
总 文件 5 你 
分 手机 图 片 您 
or =。 
游 请 表 友 同步 这 个 文件 去 
2. 历史 版 本 
当 误 删 文件 需要 找 回 的 时 候 ， 可 以 通过 坚果 云 的 历史 版 本 去 恢复 ， 坚 果 云 会 为 我 们 保留 3 
个 月 内 的 历史 文件 。 
直 看 历史 段 事 
文件 各 甘于 改 拓 Setch 
”】 可 标 枚 时 .sketch 是 ,PP 11v 2018 .00.03 1327 
一 区 各 -一 ~ 一 
重合 名 但 子 的 健 人 20ace61 we T 和 
之 一 i = 
[的 重 制 » 蛋子 防 从 Zounsl MB 下 站 
2 
面 别 除 和 maoew'ol we TF 
间 湛 加 书签 版本 专人 全 因 


3. Eagle、 坚 果 云 配合 


可 以 把 Eagle 的 本 地 文件 夹 放 到 坚果 云 里 同步 ， 然 后 在 另外 一 台 计 算 机 上 把 Eagle 的 文件 
夹 同 步 下 来 ， 这 样 Eagle 素材 库 也 能 实现 云 同 步 了 。 


高 保 真 交互 原型 一 一 Protopie 


Protopie 可 以 让 你 的 原型 自己 说 话 ， 无 须 输 代 码 就 可 以 实现 几乎 所 有 交互 效果 。 操 作 原 理 
是 交互 = 对 象 + 触 帮 动 作 + 反 应 动作 ， 非 常 适 合 做 用 于 设计 稿 演示 的 高 保 真 原型 ， 且 支持 传 
感 交 互 ， 例 如 麦克 风 、3D Touch 等 。 支 持 macOS 和 Windows 系 统 ， 移 动 端 支持 iOS、 
Android 系 统 。 
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1. 操作 原理 
先 选 择 触发 动作 的 对 象 ， 也 就 是 说 对 页 面 上 的 哪个 元 素 进 行 操作 ， 会 友 生 交互 行为 ; 然后 


选 
再 选择 触 上 友 交 互 行 为 的 动作 ， 如 单 击 或 者 下 拉 等 。 


选择 触发 动作 的 对 象 


* 未 命名 - protopie 


选择 触发 动作 


最 后 再 选择 上 友 生 交互 行为 后 的 参数 以 及 图 层 ， 例 如 放大 至 500px，x 由 移动 至 281px 等 。 
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2. 手机 实时 预 旧 
手机 下 载 客户 端 之 后 ， 可 直接 预览 制作 的 效果 ， 百 分 百 模拟 开发 者 实现 后 的 效果 。 


动 效 制 作 及 输出 一 一 AE+Lottie 


Adobe After Effects 简 称 AE， 是 Adobe 公 司 推出 的 一 款 图 形 视频 处 理 软件 。 昌 说 其 特长 
在 于 制作 视频 动画 ， 对 于 U1 动 效 来 说 有 点 大 材 小 用 ， 有 些 烦 琐 上 且 没 有 交互 行为 ; 但 它 配 
合 Airbnb 的 Lottie 使 用 ， 可 以 将 动 效 直接 导出 json 文件 ， 供 开发 者 直接 调用 ， 能 有 效 
减少 动 效 输出 的 成 本 以 及 开发 的 成 本 。 


1. 前 期 准备 


安装 好 AE 客户 端 以 及 插件 bodymovin.zxp 和 ZXP Installer 之 后 ， 单 击 AE 的 “窗口 - 
扩展 ”会 新 增 一 个 bodymovin ， 如 果 没 有 就 表示 没有 安装 成 功 。 


SO 1 Lottie 插件 
< ;3 一， 间 v Cv » 


个 人 收藏 
例 隔 空投 送 [| | 
最 近 使 用 


CO iCloud 云 盘 bodymovin.zxp ZXP Installer 
应 用 程序 

[桌面 

人 下 载 

团 文稿 

| Creative Clou... 

阐 | 坚果 云 


澡 得 


确定 插件 安 委 成 功 后 ， 打 开 AE “编辑 - 首选 项 - 常规 -~ 界面 ”， 选 中 人 允许 脚本 写 入 
文件 和 访问 网 络 〈 否则 后 面 导出 时 会 报错 ) ， 完 成 这 一 步 之 后 就 可 以 开始 正常 制作 动 
效 了 。 


2. 结合 Lottie 导出 json 文件 


单 击 扩展 里 的 bodymovin 插件 ， 就 会 出 现 所 做 的 动 效 。 选 择 需 要 输出 的 动 效 以 及 文件 保 
存 地 址 ， 然 后 再 单 击 设置 图 标 ， 选 择 输出 的 格式 ， 选 中 第 2 个 和 倒数 2 个 并 保存 。 
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选择 输出 的 动 效 以 及 保存 地 址 选择 输出 格式 


单 击 Render 输出 文件 即 可 。 最 终 输出 的 文件 包 合 json 文件 、 可 和 直接 预见 的 原型 以 及 使 
用 的 素材 文件 夹 。 


横 出 正在 输出 


男 重 点 


以 上 介绍 了 一 些 好 用 的 软件 ， 包 括 在 线 协同 工具 石墨 文档 、 图 片 管 理工 具 Eagle、 云 存储 
工具 坚果 云 、 高 保 真 交互 原型 工具 Protopie、 动 效 制 作 及 输出 工具 AE+Lottie。 这 些 都 能 
帮 我 们 在 一 定 程度 上 提高 工作 效率 ， 减 少 重复 性 工作 ， 非 党 值得 一 试 。 
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01 情感 化 设计 理论 


文 / 付 钼 更 


情感 化 设计 是 完善 产品 、 提 升 用 户 体 验 的 关键 。 在 当今 移动 应 用 泛滥 的 时 代 ， 只 有 存在 情 
感化 设计 的 产品 才能 脱颖而出 。 如 今 的 用 户 不 再 满足 于 与 冰冷 的 机 器 进行 豆 动 ， 更 硕 望 在 每 
次 操作 中 有 情感 上 的 互动 。 情 感化 设计 在 很 多 时 候 可 以 缓解 用 户 负面 情绪 ， 帮 助 用 户 快速 熟 
悉 产 品 。 所 以 ， 了 解 情感 化 设计 并 有 效 地 运用 ， 是 一 款 好 产品 烽 不 可 少 的 环节 。 


中/ 


什么 是 情感 化 设计 


情感 化 设计 旨 人 芷 抓 住 用 户 注意 力 、 诱 上 友情 绪 反 应 ， 以 提高 执行 特定 行为 的 可 能 性 。 通 俗 地 


网 络 用 图 -情感 表现 
讲 ， 融 是 设计 肝 种 方式 去 刺激 用 户 ， 让 其 有 情感 上 的 波动 。 通 过 产品 的 功能 、 产 品 的 肤 些 
操作 行为 或 者 产品 本 身 的 某 种 气质 ， 让 用 户 产生 情绪 上 的 唤醒 和 认同 ， 最 终 使 用 户 对 产品 
产生 某 种 认 知 ， 在 心目 中 形成 独特 的 定位 ( 出 目 《 设 计 心理 学 》) 。 


情感 化 设计 三 要 到 与 产 品 的 结合 


Donald A. Norman 的 《设计 心理 学 3: 情感 化 设计 》 一 书 中 ， 从 知觉 心理 学 的 角度 解释 
了 人 在 三 个 层次 的 本 性 ， 即 本 能 的 、 行 为 的 、 反 思 的 。 
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情感 化 设计 三 要 素 


1. 本 能 水 平 的 设计 
本 能 水 平 设计 的 基本 原理 来 自 人 类 本 能 ， 这 一 层次 的 主要 物理 特征 是 视觉 、 听 觉 、 触 觉 占 主 
要 支配 因素 。 一 般 人 刚 看 到 一 个 物品 时 就 想 要 ， 往 往 是 出 于 本 能 选择 。 


案例 : 本 能 水 平 的 设计 在 移动 端 Ul 中 的 运用 就 是 视觉 的 体现 符合 大 众 认 知 ， 让 用 户 看 
到 后 就 有 想 下 载 的 冲动 。 由 此 也 可 见 设计 师 的 重要 性 ， 颜 值 才 是 产品 的 敲门砖 ， 如 下 
图 所 未: 


民 昌 区 四 的 


际 户 查询 转账 话费 充值 。 信用 卡 。 直 捅 -视频 


多 加 生日 上 嫩 


理财 存款 基金 黄金 。 网 点 预约 。 全 部 


榨 近 证 褒 ” 国 时 给 生 合 多 一 次 机 合 ! 医疗 + 重 疾 


宫 短 三 甲 短 队 ， 瓜 分 百 万 奖池 ! 


悠 的 最 高 可 佳人 金额 Y 


| 炳 选 理财 300,000 
原油 3M 看 防 莹 鱼 诸 原油 1M 首 趟 这 鱼 同 你 的 罚 小 情人 活 情 家 
2.00%-9.00% 2.50%-8.90% 手机 世界 汽车 生活 行走 时 光 
预 姑 年 化 收益 率 预期 年 化 收 状 亩 OR | br- 
/Ml 
会 的 是 忆 只 四 - ee 
首页 金 感 扫 码 支付 生活 我 的 领 过 发 更 生活 卡 去 一 戈 的 
交通 银行 掌上 生活 


抛 开 不 同 银行 的 情景 ， 两 张 图 同 为 银行 的 首页 界面 ， 如 果 让 你 选择 一 个 App 留 在 手机 中 
会 坏 么 选择 ? 我 咨询 了 100 位 杀 朋 好 友 ， 最 终 选 择 掌 上 生活 的 人 占 82%; 选择 交通 银行 
的 占 18%。 


18% 


通过 这 个 测试 我 们 可 以 看 出 ， 视 党 效果 企 产 品 初期 的 下 载 率 上 会 起 到 决定 性 作用 。 
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2. 行为 水 平 的 设计 
行为 水 平 的 设计 注重 的 则 是 效用 ， 产 品 需要 功能 良好 ， 操 作 简 单 ， 并 具备 物理 感觉 ( 真实 
感觉 ) 。 以 使 用 者 为 中 心 才 是 设计 的 核心。 


案例 :上 面 说 视觉 是 敲门砖 ， 那 么 行为 水 平 的 设计 融 是 用 户 愿 不 愿 继续 使 用 的 决定 因素 ， 
也 是 提升 用 户 体 验 最 天 键 的 部 分 。 再 好 看 的 设计 ， 如 果 用 户 使 用 起 来 有 诸多 不 殉 也 是 枉 
然 。 下 面 整理 了 一 部 分 行为 水 平 的 设计 案例 。 


1 ) 贴心 的 功能 
共享 单车 系列 的 产品 中 ， 我 最 喜欢 的 融 是 7 号 电 单 车， 什么 原因 呢 ? 


7 号 电 单 车 在 开车 后 的 界面 中 有 两 个 操作 ，“ 临时 锁 车 “和 “结束 用 车 ”， 这 就 是 功能 
好 ， 摩 拜 就 没有 考虑 到 这 样 的 使 用 场景 我 需要 到 达 多 个 目的 地 且 停 留 时 间 都 很 短 ， 如 果 
不 锁 车 可 能 被 别人 偷 骑 走 ， 锁 了 车 又 会 被 别人 再 次 开锁 骑 走 。 所 以 就 功能 而 言 ，7 号 电 单 
车 的 体验 更 好 。 


摩 拜 单车 7 号 电 单 车 


2 ) 引导 用 户 
产品 初期 和 和 迭代 中 都 会 存在 用 户 不 了 解 信 息 以 及 功能 的 情况 ， 所 以 我 们 需要 用 文字 的 形式 
帮助 和 5 引导 用 户 。 


如 下 图 所 示 ，Keep 选 择 用 图 标 、 文 字 、 按 钮 的 组 合 引 导 用 户 如 何 去 更 好 地 使 用 ， 微 信 则 
是 用 一 个 纯 文字 的 弹 框 告知 用 户 需 要 注意 的 事件 。 所 以 ， 在 产品 中 运用 通俗 易 懂 的 图 文 来 
告诉 用 户 当 下 友 生 的 事情 和 和 需要 去 执行 的 事情 ， 也 是 情感 化 设计 的 重要 环节 。 
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开局 定位 


获取 更 多 同城 热门 动态 
结识 更 多 运动 好 友 


一 te 


Keep 微 信 - 据 一 扬 


3. 反思 水 平 的 设计 
当 用 户 在 使 用 产品 后 ， 理 性 的 思考 往往 会 让 用 户 对 产品 做 出 一 个 评价 。 这 个 层次 涉及 文 
化 、 教 育 、 个 人 经 历 等 各 方面 ， 每 个 人 的 评价 都 不 一 样 。 


案例 : 平台 中 的 扣 赞 功能 一 般 都 是 一 个 大 拇指 ， 所 以 用 己 也 不 会 因为 点 赞 而 记 住 产品 。 那 
么 ， 尝 规 且 用 己 习 惯 的 设计 ， 如 何 可 以 做 到 既 合理 又 有 特点 呢 ? 


如 下 图 所 示 ， 左 侧 是 微 博 ， 点 赞 图 标 是 常规 的 “大 拇指 ”设计 ， 不 会 给 用 户 留 下 深刻 的 印 
象 ; 而 右 侧 虎 扑 则 是 用 了 个 灯泡 图 标 配 上 文字 “ 亮 了 ” ， 既 有 新 意 ， 又 符合 使 用 场景 ， 增 
加 用 尸 的 点 击 欲 望 。 可 能 有 人 会 及 甬 ， 这 样 的 形式 增加 了 用 尸 的 学 习 成 本 。 我 们 在 前 面 也 
讲 到 需要 反思 的 是 那些 常规 且 用 尸 已 经 习惯 的 设计 ， 所 以 即便 改变 了 造型 ， 只 要 是 符合 用 
户 使 用 习惯 的 设计 ， 融 不 会 增加 用 户 的 学 习 成 本 。 


老 铁 们 铁 锅 炖 自己 等 人 共 26 条 回复 > 这 叫 什 么 啊 ， 有 点 小 山 
微 博 虎 扑 


产品 不 仅 是 所 有 功能 的 集合 ， 它 们 真正 的 价值 是 可 以 满足 人 们 的 情感 需求 ， 而 其 中 最 重要 
的 需求 就 是 建立 自我 形象 与 社会 地 位 。 反思 水 平 的 设计 包含 并 超越 前 两 个 层次 ， 我 们 要 经 
常 思 考 ， 为 什么 同类 型 的 产品 之 中 我 要 选择 它 ， 为 什么 它 给 我 留 下 了 很 深刻 的 印象 ， 这 都 
是 反思 水 平 的 设计 需要 做 的 。 
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情感 化 设计 的 作用 


1. 缓解 负面 情绪 

众所周知 ， 在 生活 中 等 待 是 最 容易 让 人 产生 负面 情绪 的 ， 设 计 中 也 是 如 此 ， 为 了 缓解 用 户 
的 焦虑 ， 减 少 等 待 时 间 是 很 必要 的 。 但 有 的 时 候 界面 加 载 时 间 受 很 多 客观 因素 影响 ， 没 有 
办 法 保证 其 速度 。 所 以 我 们 就 需要 通过 一 些 情感 化 设计 来 缓解 用 户 的 负面 情绪 。 


案例 : 可 以 在 希 要 用 户 等 待 的 地 方 加 入 一 些 动画 效果 ， 而 不 同 的 动画 效果 也 会 有 不 同 的 情 
感 传 达 ， 如 下 图 所 示 : 


站 
Bw 良心 不 会 痛 吗 ? 老人 卖 辣 概 收 到 200 元 假币 当 
场 欲 毁 无 泪 
美 团 外 卖 土豆 视频 


美 团 外 卖 的 刷新 加 载 ， 是 一 只 袋鼠 骑 摩 托 的 动画 ， 因 为 是 送 餐 服务 ， 所 以 时 刻 都 在 给 用 户 
传达 “ 快 ” 的 宗 虽 。 有 趣 的 是 ， 在 App 中 袋鼠 的 动画 是 受 红 绿灯 影响 的 ， 也 传递 了 “绿灯 
行 ， 红 灯 停 ”的 交通 法 规 ， 很 有 意义 。 而 土豆 则 是 休闲 娱乐 的 视频 App， 所 以 加 载 动 画 也 
会 传达 出 很 放松 的 情感 。 诸 如 此 类 的 动画 在 App 上 还 有 很 多 ， 只 要 在 需要 用 户 等 待 的 场景 
下 使 用 符合 情境 的 动画 ， 便 能 在 一 定 程度 上 减少 用 户 的 负面 情绪 。 


2. 5| 导 用 户 行 

人 的 记忆 分 为 短期 记忆 和 长 期 记忆 ， 短 期 记忆 也 称 工作 记忆 ， 而 我 们 在 使 用 手机 时 通常 是 
短期 记忆 ， 为 了 完成 任务 而 临时 存储 的 信息 ， 一 般 会 保留 几 秒 。 所 以 在 设计 时 我 们 要 帮助 
用 户 ， 去 减轻 他 们 的 记忆 负担 ， 下 面 结合 实际 案例 来 详细 说 明 下 。 


案例 : 界面 中 标签 有 切换 功能 ， 在 同一 模块 中 选择 不 同 的 标签 ， 它 们 的 选中 状态 样式 是 相 


ms pr 一 一 人 一 ~ 
© S 加 4 VY 2 © LD AR UY 
看 店 粹 行 次 她 我 的 首 丈 “家 看 应 乌 行 两 性 秘 的 


马蜂 谢 -首页 马蜂 窝 - 北 京 
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不 要 增加 用 户 的 记忆 负担 ， 避 免 同 个 操作 和 在 不 同 模式 下 有 不 同 的 效果 。 


情感 化 设计 的 风险 


要 知道 情感 化 设计 是 为 满足 用 尸 的 情感 需求 而 生 ， 有 些 情感 化 设计 是 需要 结合 产品 的 定 
位 、 文 化 区 域 而 定 的 。 事 物 存 在 两 面 性 ， 有 的 情感 化 设计 会 得 到 用 尸 的 喜爱 和 兴趣 ， 有 的 
则 会 给 用 户 带 来 负面 情绪 。 


1. 产品 定位 不 同 

不 同 的 产品 定位 需要 不 同 的 情感 化 设计 。 例 如 上 面 说 到 的 ， 美 团 为 了 体现 速度 用 了 袋鼠 骑 
摩托 的 动画 ， 而 土豆 主要 是 休闲 视频 ， 所 以 动画 效果 用 的 则 是 品牌 人 物 在 吃 爆 米花 。 两 者 
调换 后 就 不 会 有 那么 好 的 效果 了 。 


2. 时 效 性 

情感 化 设计 是 有 时 效 性 的 ， 不 同 阶段 所 用 的 设计 也 会 有 所 区 别 。 例 如 过 节 时 期 ， 很 多 App 
都 会 把 界面 做 成 符合 节日 的 插画 、 图 标 等 ， 但 不 会 长 期 使 用 。 本 文中 举 的 很 多 例子 在 目前 
的 版 本 已 经 不 再 使 用 ， 如 下 图 所 示 : 


LEELLAGEIEIE 下 字 
和 东 二 环 言 华 大 后 


色 16°C 


、“… 双 ]1f 我 7 么 征 欢 诊 i 
S 全 场 9 折 起 
SN 


反 分 1012 红 包 人 


ooreorans 深夜 便利 店 品质 联盟 覃 民 革 市 
@ OO 日 2 @ @ 日 4 
钱 了 么 -常规 首页 钱 了 么 -世界 杯 首页 


图 中 左 侧 是 饿 了 么 的 常规 首页 ， 右 侧 是 它 在 世界 杯 时 期 的 界面 设计 。 页 面 的 Banner 以 及 
金刚 区 图 标 改版 后 都 围绕 世界 杯 主 题 设 计 ， 迎 合 当 时 的 氛围 ， 喜 欢 世 界 杯 的 用 户 或 许 也 
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会 选择 有 世界 杯 界面 的 外 卖 订 餐 。 但 世界 杯 的 时 段 一 过 ， 还 需要 恢复 为 常规 界面 ， 这 便 
是 时 效 性 。 


男 重 点 


(1 ) 情感 化 设计 的 重要 性 : 提升 用 户 体验 、 提 升 下 载 率 、 保 证 留存 率 、 城 少 卸载 率 ; 


( 2 ) 情感 化 设计 的 定义 : 旨 在 抓 住 用 户 注意 力 、 诱 发 情绪 反应 ， 以 提高 执行 特定 行为 的 
可 能 性 ; 


( 3 ) 情感 化 设计 三 要 素 : 本 能 水 平 的 设计 、 行 为 水 平 的 设计 、 反 思 水 平 的 设计 ; 
(4 ) 情感 化 设计 的 作用 : 减少 用 户 负 面 情 绪 、5 引 导 用 户 行 为 ; 


(5) 情感 化 设计 的 风险 : 产品 定位 不 同 ， 情 感化 设计 需要 根据 不 同 的 产品 定位 设计 ， 否 
则 束 会 适得其反 ; 迎合 节日 活动 的 设计 不 可 以 长 久 使 用 ， 否 则 体现 不 出 设计 的 时 效 性 、 特 
殊 性 和 融合 性 。 


参考 资料 
海边 来 的 设计 师 - 情感 化 设计 -三 部 曲 _ https:/comesea.zcool.com.cn 


设计 师 ， 你 真 的 了 解 情感 化 设计 吗 ”http://t.cn/EfiaTA3 

情感 化 设计 中 的 手绘 应 用 表现 ”http:/t.cm/EfiSvNO 

情感 化 设计 在 产品 中 的 应 用 http://t.cn/EfiSxJ| 

并 不 复杂 1 写 给 新 手 的 情感 化 Ul 设计 简明 指南 。 http://t.cn/EfiSllb 


UI 界面 中 的 情感 化 设计 http://t.cn/EfiS1s2 
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02 格式 培 原 理 


文 / 吴 萌 


格式 培 心 理学 派 中 的 “格式 塔 ” 源 自 德 语 Gestalt， 意 思 是 “整体 “ 完 形 。 


该 原理 的 核心 理论 是 ， 人 的 视 锡 具有 整体 化 、 人 简化 处 理 图 形 的 倾向 ， 因 此 ， 当 一 个 不 完整 
的 图 形 出 现在 人 的 视 沈 当中 时 ， 人 的 视觉 思维 会 倾向 于 自动 将 其 补 全 ， 使 其 变 成 一 个 已 知 
的 、 完 整 的 、 常 见 的 整体 图 形 ， 即 “ 完 形 ”。 


打 个 比方 说 ， 当 你 看 到 一 个 圆 形 ， 但 圆 形 的 边 上 有 一 个 很 小 的 缺口 ， 你 的 大 脑 会 和 倾向 于 将 
尼 识 别 为 一 个 完整 的 圆 形 ; 当 你 看 到 天 空中 的 一 朱云 ， 你 会 下 意识 地 把 它 想 成 一 个 动物 或 
一 个 别 的 你 知道 的 物体 的 形象 ; 往 远 了 说 ， 在 神话 故事 里 ， 那 些 妖 魔鬼 怪 、 神 仙 车 萨 ， 他 
们 的 形象 也 是 由 已 知 的、 熟悉 的 形象 组 合 而 成 ， 而 不 是 凭空 出 现 的。 


格式 塔 作为 一 个 著名 的 心理 学 原理 ， 与 界面 设计 的 结合 也 比较 密切 。 例 如 它 可 以 帮助 我 们 
梳理 界面 的 信息 结构 、 层 级 关系 ， 提 升 界面 的 可 读 性 。 它 主要 有 几 个 特性 相似 性 、 接 近 
性 、 封 闭 性 、 连 续 性 、 主 体 与 背景 关系 和 均衡 性 ， 下 面 来 详细 讲述 。 


相似 性 


人 的 潜意识 里 会 根据 物体 的 形状 、 大 小 、 颜 色 、 亮 点 等 ， 将 视线 内 一 些 相似 的 元 素 组 成 整 
体 ， 各 目 分 类 。 如 下 方 左 图 ， 大 家 会 把 圆 形 的 一 列 看 成 一 个 整体 ， 委 形 的 一 列 看 成 一 个 整 
体 ; 而 当 我 们 为 其 改变 颜色 的 时 候 ， 如 石 图 ， 它 所 传达 出 来 的 意思 又 上 友 生 了 改变 ， 人 们 会 


189 


190 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


把 绿色 的 一 行当 成 一 个 整体 ， 检 色 的 一 行当 成 一 个 整体 。 


OPO © 
ONO © 
OPO OF 


由 此 可 以 看 出 在 人 们 的 潜意识 里 ， 对 于 形状 和 颜色 的 认 知 “比重 不 一 样 。 一 般 来 说 ， 在 
大 小 一 样 的 情况 下 ， 人 们 更 容易 把 颜色 一 样 的 看 成 一 个 整体 ， 而 忽略 形状 的 不 同 。 


所 以 当 我 们 有 几 个 平行 的 功能 点 ， 但 又 想 突出 一 个 的 时 候 ， 融 可 以 把 那 一 个 做 成 特殊 的 形 
状 或 者 是 不 同 的 颜色 、 大 小 等 ， 这 样 用 户 能 一 眼看 到 你 要 突出 的 部 分 ， 而 再 细 看 那 部 分 ， 
又 和 其 他 部 分 是 一 个 整体 ， 不 突 元 ， 类 似 于 平面 设计 中 的 “特异 。 


如 下 图 所 示 ， 美 图 秀 秀 和 土豆 视频 通过 放大 、 加 深 拍 照 、 担 视频 的 图 标 ， 使 之 与 底部 标签 
栏 上 的 其 他 图 标 有 所 不 同 ， 但 是 又 能 看 出 来 同属 于 一 个 整体 。 


父亲 人 节 这 对 父 女 我 看 不 下 去 自从 这 两 兄弟 吃 了 自制 的 " 恐 手 : 
了 倚 沙 拉 ", 从 此 部 下 不 可 和 保 
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接近 性 


元 素 之 则 的 相对 距离 会 影响 我 们 的 视觉 感知， 通常 我 们 认为 互相 靠近 的 元 素 属于 同一 组 ， 
而 那些 距离 较 远 的 则 不 属于 同一 组 。 接 近 性 和 相似 性 很 像 ， 不 过 相似 性 强调 内 容 ; 而 接近 
性 强调 位 置 ， 元 素 之 间 的 相对 距离 会 直接 影响 它们 是 不 是 同属 于 一 组 。 如 下 图 所 示 ， 我 们 
会 把 左边 9 个 圆 形 当成 一 个 整体 ， 而 右边 则 会 把 第 一 列 当 成 一 个 整体 ， 把 第 二 、 三 列 当成 
另外 一 个 整体 。 


引起 这 样 的 视 党 感受 主要 是 因为 圆 形 的 相对 距离 不 同 。 左 图 中 图形 距离 都 一 样 ， 没 有 对 比 ， 
而 右 图 第 二 、 三 列 的 圆 形 明显 靠 得 近 些 ， 目 然 它们 融 属 于 一 组 ， 较 远 的 第 一 列 则 不 属于 。 


任 Ul 中 最 营 见 的 融 是 列表 以 及 文字 展示 、 图 文 展示 了 ， 人 在 列表 页 信息 多 的 时 候 ， 都 会 把 趋 
于 相似 的 功能 放 在 一 起 ， 利 用 接近 性 原理 ， 使 它们 在 视 党 上 趋 于 一 个 整体 。 这 样 既 能 让 界 
面 功 能 清晰 易 懂 ， 又 不 到 于 杂乱 无 章 。 


"中 国 移动 倒 19:17 7 190% 


La 、 栓 子 的 棍子 - Pe 


微 信 号 : Ikk7359 


1 我 关注 的 人 0 关注 我 的 人 


苞 钱包 
四 我 的 学 生 证 
语 收藏 
四 相册 人 我 的 册 章 
喇 卡 包 OO 我 的 账户 25.90 
国 表情 
加 我 的 优 志 郑 加 
他 设置 
(0 已 下 载 音频 
人 @ 推荐 [得 到 | 给 好 友 
的 请 可 得 20 元 优惠 券 
AR engok 和 
-二 0 Z9 上 © 日 日 2 
我 的 


微 信 得 到 
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在 文字 展示 中 ， 标 题 也 会 更 趋 近 于 目 己 的 正文 内 容 ， 使 得 信息 层级 区 分 得 更 明显 。 


% 相 中 国 移动 令 22:08 TS12%0 ) 


《 “无 悔 青 春 畅游 


学 生 时 代 的 旅行 ， 往 往 充满 了 好 奇 心 旺盛 的 
大 冒险 、 一 路 不 停 的 欢笑 声 ， 朋 友 间 的 暖 心 
对 谈 。 不 论 是 经 济 的 合 住房 源 ， 还 是 适合 海 
边 聚会 的 整套 房 源 ， 希 望 爱人 彼 迎 的 家 能 成 为 
你 青春 旅行 回忆 的 一 部 分 。 


推荐 时期 游 目的 地 _ 
“给 目 己 一 个 淮 包 的 表 容 旅行 问 侯 I 


实 这 一 点 ， 和 《 写 给 大 家 看 的 设计 》 中 作者 Robin Williams 提出 的 “亲密 性 ”意思 一 
杀 密 性 主要 讲 的 是 彼此 有 天 联 的 元 素 企 页 面 上 的 距离 要 近 些 ， 而 没有 天 联 的 要 离 得 远 
。 如 果 页 面 上 元 素 的 杀 密 性 一 样 ， 那 么 我 们 融会 把 它 当 成 一 个 整体 。 


封 半 性 


人 的 眼睛 在 观看 时 ， 大 脑 并 不 是 在 一 开始 就 区 分 出 各 个 单一 的 组 成 部 分 ， 而 是 将 各 个 部 分 
组 合 起 来 ， 使 之 成 为 一 个 更 易于 理解 的 统一 体 。 这 个 统一 体 是 我 们 日 常生 活 中 常见 的 形 
象 ， 如 正方 形 、 圆 形 、 三 角形 、 猫 、 狗 等 。 


上 长 覃 


2 


如 苹果 公司 的 logo 融 算 存 在 缺口 ， 但 是 我 们 还 是 能 一 眼看 出 它 融 是 个 苹果 的 外 形 ; 而 右边 
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的 熊猫 头 部 和 背部 都 没有 明显 的 封闭 界限 ， 但 是 我 们 还 是 会 把 它 当 成 一 个 完整 的 熊猫 ， 其 
至 不 会 觉得 奇怪 。 


这 一 原则 在 很 多 地 方 都 会 用 到 。 例 如 人 在 第 一 页 屏 影 中 ， 我 们 总 会 露出 下 一 个 模块 的 边 角 ， 
或 者 是 可 滑动 的 banner 图 ， 都 会 外 露 下 一 模块 的 内 容 。 这 本 质 上 融 是 利用 了 这 一 原则 ， 
人 的 眼睛 有 自动 补 全 功能 ， 不 用 看 到 全 部 ， 也 能 脑 补 出 下 一 模块 会 出 现 什么 。 


Mi 中国 移 动 全 > 20:26 To a7% mm 
本 
游戏 @® 
主打 推荐 二 
宝 钻 传奇 $ 
用 彩色 宝珠 创造 美丽 珠 军 L 


热血 沸腾 的 PvP 游戏 查看 全 部 


如 音 技 游戏 获取 | 

SG 和 

/© Wks vn 
UDB OQ 


己 er 
口 El 过 
Togay ADpP 


淘 票 票 App Store 


连续 性 


人 的 视觉 具 备 一 种 运动 的 惯性 ， 会 向 一 个 方向 延伸 ， 以 便 把 元 素 连接 在 一 起 形成 整体 。 如 
下 图 ， 你 是 会 把 它 当 成 两 个 大 的 圆 形 ， 还 是 当成 无 数 个 小 圆 呢 ? 毋庸 置 疑 ， 第 一 眼看 到 的 
时 候 ， 肯 定 是 两 个 大 的 圆 形 ， 而 不 是 无 数 个 小 圆 。 
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主体 与 育 景 关系 


我 们 在 看 一 个 


页 面 的 时 候 ， 忌 是 不 自觉 地 将 视觉 区 域 分 为 主体 和 背景 ， 而 且 会 习惯 把 小 


的 、 突 出 的 那个 看 成 是 背景 之 上 的 主体 。 主 体 越 小 的 时 候 ， 主 体 与 背景 的 对 比 关 系 越 明 


显 ， 主 体 越 大 则 关系 越 模 糊 。 


日 色 表 示 主 体 灰色 表示 育 景 


而 在 UI 设计 中 ， 
能 起 到 弱化 背景 、 


全 球 正品 直 采 
红 书 福利 社 ， 每 天 给 小 红 暮 


带 来 限量 全 球 精 选 福利 ! 


BOOO 


海外 直 采 ”海关 监管 PICC 系 保 7 天 退货 


小 红 书 


当主 体 达到 最 大 值 一 一 全 屏 的 时 候 ， 主 体 与 育 景 


最 单 见 的 区 分 背景 和 主体 的 方式 就 是 蒙 版 遮 章 以 及 毛 玻 璃 效果 ， 这 两 种 都 
突出 主体 的 作用 ， 使 得 它们 的 对 比 天 系 更 明显 。 


吴川 中 国 移动 邻 22:18 全 了 相 地 58% 本 ) 
隐隐 = EE 
07/2018 
OPPO R11 
深圳 : 畏 28*C 里 示 年 加 2 
择 的 泊 陆 手机 


日 日 日 口 
oo oo 


光影 秀 


xX 


微 博 


合 二 为 一 ， 主 体 与 背景 的 对 比 区 分 就 不 存 
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在 了 。 这 种 情况 常用 于 全 屏幕 的 弹 窗 。 


0 中 中 国 移动 地 22:34 了 画 下 23% 攻 4 


〇 。” 反 ' 圣 塞 巴 斯 幕 安 " 试 试 x 


搜 “ 圣 塞 巴 斯 蒂 安 ” 试 试 
9 任何 地 方 

9 附近 

@ 泰国 .1 位 

@ 北京 .1 位 

@ 深圳 .1 位 

@ 大 梅 沙 - | 位 


@ 东京 .1 位 


二 首尔 :1 位 


Airbnb 


人 在 观察 一 个 物体 的 时 候 ， 会 下 意识 地 去 寻找 它们 的 平衡 点 。 元 素 佳 页 面 上 处 于 一 种 平 
衡 状 态 ， 看 起 来 是 一 样 大 小 ， 会 让 人 心情 舒缓 愉悦 。 而 在 App 界面 设计 中 这 一 点 尤为 重 
要 ， 可 能 你 在 设计 的 时 候 会 不 自 党 地 运用 这 一 点 。 


需要 注意 的 是 ， 视 觉 大 小 和 物理 大 小 ， 例 如 边 长 和 直径 相同 的 正方 形 和 圆 形 ， 在 视 党 上 我 
们 会 党 得 它们 不 是 一 样 大 的 。 
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当 我 们 要 让 其 变 得 “一 样 大 ”的 时 候 ， 就 可 以 选择 将 圆 形 调 大 一 点 ， 或 者 把 正方 形 调 小 一 
点 ， 让 它 们 在 视 党 上 保持 一 致 。 
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这 点 在 实际 工作 中 要 尤为 注意 ， 很 多 时 候 图 标 物 理 大 小 是 一 样 的， 但 视 党 大 小 并 不 是 一 样 
的 。 而 我 们 的 输出 物 最 终 是 以 视觉 呈现 的 ， 所 以 必须 保证 视 党 效果 一 样 。 


Slo | Slo 


物理 大 小 一 样 ， 视 觉 效果 不 一 样 视觉 效果 一 样 


男 重 点 


格式 塔 原理 有 以 下 几 种 特性 : 


相似 性 : 人 的 潜意识 里 会 根据 形状 、 大 小 、 颜 色 、 亮 点 等 ， 将 视线 内 一 些 相似 的 元 素 组 
成 整体 。 


接近 性 : 元 素 之 间 的 相对 距离 会 影响 我 们 的 视觉 感知 ， 通 常人 们 会 认为 互相 靠近 的 元 素 属 
于 同一 组 ， 而 那些 距离 较 远 的 则 不 属于 同一 组 。 


封闭 性 ， 人 的 大 脑 在 看 一 个 物体 的 时 候 ， 会 更 趋 近 于 把 它 当 作 一 个 整体 ， 而 不 是 单个 部 分 。 


主题 与 背景 天 系 : 我 们 在 看 一 个 页 面 的 时 候 ， 习 惯 于 把 小 的 、 突 出 的 部 分 看 成 是 背景 之 上 
的 主体 。 主 体 越 小 的 时 候 ， 主 体 与 背景 的 对 比 天 系 越 明 显 ， 主 体 越 大 则 关系 越 模 糊 。 


均衡 性 : 人 们 在 观察 一 个 物体 的 时 候 ， 会 下 意识 地 去 寻找 它们 的 平衡 点 ， 元 素 在 页 面 上 处 
于 一 种 平衡 状态 ， 会 让 人 心情 舒缓 愉悦 。 


其 实在 实际 中 ， 格 式 塔 的 各 个 特性 一 般 都 不 会 孤立 存在 ， 它 们 都 是 相互 影响 的 。 例 如 均衡 
性 里 说 到 的 图 标 元素 在 视 党 上 保持 统一 ， 里 面 也 涉及 相似 性 ， 即 人 们 更 容易 把 相似 的 物体 
当成 一 组 。 所 以 我 们 不 要 孤立 地 去 想 它 、 用 它 。 
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03 ” 巴 南 党 夫 反应 


文 / 姜 正 


我 们 面 对 示 知事 物 总 是 抱 有 好 奇 心 ， 总 是 会 猜测 到 底 发 生 了 什么 。 例 如 我 们 在 手机 上 接收 
到 产品 的 推送 或 者 好 友 发 来 的 消息 时 ， 我 们 总 是 会 忍 不 住 打开 手机 看 一 下 ， 但 我 们 却 不 知 
道 它 什么 时 候 会 给 你 友 送 消息 ， 或 者 是 谁 会 给 你 友 送 消息 。 


表面 上 是 我 们 的 好 奇 心 在 驱使 ， 实 质 上 则 是 我 们 体内 的 多 巴 胺 系统 对 于 外 界 刺激 做 出 了 反 
应 ， 而 多 巴 胺 系统 恰恰 是 巴 甫 洛 夫 反应 的 控制 器 。 巴 甫 洛 夫 反应 是 我 们 在 设计 中 最 经 常 使 
用 的 心理 学 说 之 一 ， 通 过 巴 甫 洛 夫 反应 能 够 帮助 我 们 解释 人 们 为 什么 乐于 对 日 常 接收 的 信 
息 内 容 做 出 迅速 的 反应 ， 它 也 能 指导 我 们 日 常 的 设计 工作 。 


巴 南 洛 夫 反应 的 定义 


巴 甫 洛 夫 反应 由 俄罗斯 生理 学 家 巴 甫 洛 夫 (lvan Petrovich 
Pavlov，1849 一 1936 ) 创立 。 巴 甫 洛 夫 反应 是 指 对 于 具有 特定 线 
索 、 可 被 预示 即将 发 生 的 事物 ， 我 们 的 身体 会 立刻 做 出 反应 ， 巴 甫 
洛 夫 反应 又 称 “ 条 件 反射 定律 ”。 


值得 一 提 的 是 ， 巴 甫 洛 夫 反应 的 控制 器 是 我 们 身体 的 多 巴 胺 系统 。 
针对 不 同 外 界 环境 的 刺激 ， 我 们 体内 的 多 巴 胺 系统 会 做 出 不 同 的 应 
对 反应 ， 而 且 生 物体 内 的 多 巴 胺 系统 对 能 够 得 到 奖励 的 刺激 尤为 敏 
感 ， 并 且 充 满 期 待 。 


举 一 个 简单 的 例子 ， 训 大 师 这 个 职业 融 是 成 功利 用 巴 甫 洛 夫 反应 的 
最 佳 案例 之 一 ， 训 大 师 往往 会 通过 物质 和 行为 的 不 断 刺 激 ， 给 予 屁 
物 大 一 些 奖 励 让 它 记 住 一 些 特定 的 信号 和 动作 ， 一 旦 训 大 师 做 出 特 
定 的 动作 ， 龙 物 大 就 会 接收 信号 做 出 特定 的 有 反应， 期待 得 到 相应 的 
奖励 。 例 如 人 简单 的 坐 下 、 握 手 等 动作 都 是 对 巴 甫 洛 夫 反应 的 表现 。 
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应 用 场景 


1. 消息 提示 


经 常 有 同学 说 自己 有 强迫 症 ， 看 到 App 图 标的 小 红 点 ( 徽标 ) 就 想 点 掉 ， 其 实 这 正 是 产 
品 利用 了 巴 浦 洛 夫 反 应 。 通 过 微 标 这 一 特定 线索 ， 预 示 着 用 户 收 到 了 新 的 消息 内 容 ， 导 至 


用 尸 看 到 徽标 就 迫不及待 想 点 击 查 看 。 


经 常 出 现 的 使 用 场景 有 底部 导航 栏 、 底 部 操作 栏 、 信 息 列 表 、 核 心 功 能 等 ， 以 微 信和 易 信 
为 例 ， 通 常 以 徽标 的 形式 出 现在 功能 图 标 和 用 户头 像 的 石上 和 角 以 及 信息 栏 末 尾 的 位 置 ， 通 


知 用 户 当前 有 未 读 取 的 消息 内 容 ， 如 下 图 所 示 : 


2. 信息 简介 


4 站 中 国联 通 全 下 午 7:37 


微 信 (4) 
Q 搜索 


Om 


包 了 32% 硬 )4 


© 


回 订阅 号 消息 
每 盐 社 : 图 片 比 例 ， 你 还 不 知道 如 何 设 所 


『 微 信 运动 


多 ex 


已 


天 记录 发 现 


KE © 


i 掉 中 国联 通 人 室 下 午 7:37 


区 32% 国 ft 
电话 易 信 十 


网 易 新 闻 上 06:4 
化 大 ;学术 把 关 不 正 确认 其 天 恼 学 术 不 详 个 
易 信 支付 
春运 来 了 ， 回 家 过 年 免费 领取 保障 侈 四 
@) 易 信和 团队 I9 
ls 9 
公众 号 ; 
易 信 小 助手 ;下 血本 了 ! 豪华 商务 公文 外 ® 
58 同 城 
So 本 地 最 新 降价 房 源 已 更 新 Pe 


& 云 课 堂 UI| 微 专业 一 期 易 信 和 群 
kitty" 撤 回 了 一 条 消息 


As 册 于 得 
-本 


加 信 


多 信 


在 多 巴 胺 系统 中 ， 少 量 的 信息 并 不 能 满足 用 户 对 于 更 加 全 面 和 完整 的 信息 的 追求 。 在 产品 
中 ， 由 于 受到 硬件 载体 的 限制 ， 无 法 将 详细 的 信息 一 下 子 全 部 显示 出 来 ， 所 以 通过 信息 简 
介 的 形式 ， 以 简短 的 标题 告诉 用 户 当前 模块 的 内 容 主 题 。 产 品 正 是 利用 巴 甫 洛 夫 反应 ， 通 
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过 简短 的 标题 信息 来 吸引 用 户 ， 引 导 用 户 点 击 查看 详情 页 面 。 例 如 ，36 氮 、 今 日 头条 、 好 
奇 心 日 报 都 是 通过 简短 的 信息 来 吸引 用 户 ， 利 用 用 户 对 更 多 、 更 加 全 面 信息 的 渴求 诱导 
所 击 。 


加 朗 素 ll 全 F447:42 @ 739%)+ "sl 他 1742 四 


口 刘 诉 回应 春晚 扫 蛮 | 草 果 耗 电 太 快 怎 ... | 一 


关 涩 推荐 热点 北京 视频 国 风 三 招 人 ! 与 《好 奇 心 日 
报 》 一 起 做 点 有 意义 的 
习近平 的 2019. 一 月 ; 六 个 金 句 看 新 年 
开局 
| 
' 央视 快 评 | 坚定 不 移 走 中 国 特 色 社 会 主义 电影 荒 ? 来 份 猫眼 8 分 
洱 何 抓 住 更 大 的 会 ? 法 治 道路 以 上 影 单 ， 够 看 到 22 
四 Tr 世纪 了 | 好 麻 心 秤 洪 
全 王 规 与 泰国 外 长 敦 战略 磋 
ee 政治 领导 人 的 语言 越发 
_ 自信 随 性 ， 这 具体 表现 
在 哪些 方面 ? 
ify 收购 狂 窗 公司， 音乐 访 媒 
pr rt | 页 静 雪 走时 哈 风 换 小 胜 关 不 科 少 女 范 个 i 
会 性 又 吸 睛 
香港 测试 监狱 内 数字 设 。 一 
备 ， 增 强 摄像 头 和 手 环 


租房 税 减 半 1 月 租金 10 万 以 下 按 监控 A 
2.5% 征 税 ! E 四 aa 元 所 
oy 9 13 时 Pa Y ph ~ Ny 


36 握 今日 头条 好 和 奇 心 日 报 


3. 况 浸 了 式 体验 设计 

当 用 户 面 对 Feed 流 、 卡 片 流 、 瀑 布 流 等 沉浸 式 的 设计 形式 时 ， 当 前 页 面 的 内 容 极 有 可 能 
不 满足 用 户 的 需求 ， 因 为 用 户 总 是 渴望 得 到 更 多 、 更 全 面 的 内 容 。 这 时 用 户 会 通过 不 断 下 
拉 这 一 交互 行为 ， 查 看 隐藏 在 屏幕 下 端 未 显示 的 内 容 来 满足 自己 ， 如 下 图 所 示 : 


加 坦 索 wii 全 下 午 753 B17 S51% + wii 中国 联通 流 下 午 8:06 全 了 66% D's | 中 国联 通 从 下 午 8:C8 全 了 69% DD # 
Q 搜索 pi bo < same 摄 影 大 赛 关注 外 
推荐 附近 视频 美食 宠物 购 4 最 新 今日 最 执 一 周 最 热 


2 > 
回 北 京 以 后 发 现 了 这 家 不 到 六 点 已 经 座 满 了 
座 真 的 超 开心 和 0201005 40 
篇 TC\RK 204 


李宁 押 约 时 装 交 走秀 坎 
ACE 1.6 失 和 党 # 开 箱 # 


本 
hb mice 每 日 措 配 精进 ， 今 日 份 
， #nice LDOKE 带 上 很多 £ 浙 吉 的 将 十 
- 很 多 人 都 说 好 吃 ， 来 党 nicer 都 分 享 了 自己 的 妓 措 
提前 跟 老 板 预约 留 位 ， 尝 ， 结 果 生 章 好 了 很 多 
每 次 必 点 100 串 一 泥 炉 人 内 坚 丙 0 201 
关 A 要 要 几何 A 由 179 — 


大 众 点 评 nice same 
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大 众 点 评 、nice、Ssame 都 是 利用 用 户 对 于 更 多 、 更 全 面 信息 的 起 求 ， 刺 激 用 户 不 断 下 
拉 浏 览 新 的 信息 。 这 不 但 提高 了 用 户 的 浏览 量 ， 同 时 也 提高 了 产品 的 沉浸 感 。 


4. 弹 幕 

面 对 源源 不 断 弹出 的 弹 幕 ， 用 户 总 是 充满 了 期 待 。 弹 幕 按 照 特 定 的 轨迹 ( 线索 ) 运动 预示 
着 即将 出 现 新 的 内 容 ， 让 用 户 对 此 产生 期 待 ， 淘 望 看 到 下 一 条 弹 幕 以 及 后 续 其 他 用 户 源 源 
不 断 产 生 的 内 容 ， 也 让 用 户 愿 意 化 更 多 时 间 停 留 企 当前 页 面 当 中 。 


? 、 


| 哦 和 不 吉 波 普 
封印 解除 及 终 认 abi 刻 刻 ， 


pl ai ， PS 人 上 游戏 站 
W Wh 
着 


呼 哩 哗 哩 


在 我 们 平时 使 用 的 大 部 分 视频 软件 中 都 有 弹 幕 的 功能 ， 弹 幕 看 似 破坏 了 用 户 的 沉浸 感 ， 
但 是 所 产生 的 内 容 能 让 用 户 更 加 沉浸 其 中 。 例 如 ， 哗 哩 哗 哩 将 弹 幕 固定 在 顶部 1/4 的 区 域 
中 ， 不 会 影响 用 己 观 看 画面 ， 让 用 户 可 以 享受 到 视频 和 弹 舌 市 来 的 双重 快乐 。 


5. 更 多 和 全 部 


在 屏 贺 中 所 能 显示 的 内 容 是 有 限 的 ， 这 往往 不 能 满足 人 们 对 更 多 和 更 全 面 内 容 的 需求 ， 所 
以 在 大 部 分 情况 下 我 们 会 利用 模 轴 交互 和 “更 多 “全 部 ”的 功能 按钮 。 模 轴 交 互 是 利用 
横向 的 未 知 空间 ( 即 屏幕 右 侧 的 隐藏 空间 ) 展示 隐藏 内 容 的 局 部 ， 一 般 会 结合 卡片 式 的 设 
计 ， 通 过 卡片 滑动 展示 更 多 的 信息 内 容 。 


* 叫 | 中 国联 通 令 下 午 8:55 


十 


Q 搜索 菜谱 、 食 材 


传唤 餐 


新 年 好 马上 又 要 元 家 


会 口 OV 


下 后 展 


“更 多 ”和 “全 部 ”也 是 常见 的 功能 之 一 ， 通 常 以 功能 按钮 的 形式 出 现 。 更 新 、 更 多 预示 
着 还 有 大 量 的 隐藏 内 容 没 有 展现 出 来 ， 这 对 用 户 的 吸引 力 无 疑 是 巨大 的 。 常 见于 金刚 区 或 


者 运营 的 专题 活动 区 。 


得 入 课堂 


下 厨房 


收藏 


7 94% Wa)s 


@ 


21701 作品 


2 


腾讯 漫画 
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“| 中 国联 通 倒 下 午 9;04 全 7 97% Ms 


2 i Hh 近 册 


音 看 更 多 > 
ShibaSan_Official HandsUPov 
479 阶 公 31298 粉 过 
法 国 地 下 House 音 乐 知 不 育 乐 人 : HandsU 


OV "7 分 享 专 辑 : 


牛 姐 Mariah Carey 全 新 专辑 《Caution》 强 
势 回 归 ， 花 遇 蝶 效应 即将 席卷 全 球 ! 最 新 专 
辑 收 录 包 括 全 球 数字 冠军 曲 《&GTFO》、 
《With You》”、《The Distance》 三 首 瞩 
目 主 打 和 7 首 风 云 单 曲 ， 掌 控 流 行 、 打 造 潮 
流 .， 枫 盘 2018 帅 湖 R&B 尖 庙 节 柏 荣 休 再 


( Cp | ue 以 
入 人 搁 区 及 友 


网 易 云 音乐 
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6. 奖励 机 制 

多 数 产 品 会 通过 一 定 的 机 制 给 予 用 户 “ 奖 励 ” 刺 激 用 户 参 加 运营 活动 ， 因 为 人 体内 的 多 巴 
胺 系统 对 奖励 的 刺激 尤为 敏感 ， 一 旦 出 现 就 会 立马 做 出 反应 。 例 如 春节 期 间 的 集 福 卡 活 
动 ， 奖 励 总 和 是 巨大 的 ， 例 如 “瓜分 四 个 亿 ， 之 类 ， 极 具 吸 引力 。 即 使 用 户 知 道 自己 最 终 
所 得 不 多 ， 但 是 面 对 这 一 巨大 利益 的 吸引 也 愿意 积极 参与 。 


支付 宝 集 福 卡 的 活动 通过 扫描 “ 福 ” 字 获得 福 卡 ， 而 且 每 张 福 卡 都 有 一 次 抽奖 机 会 ， 未 知 
的 奖励 更 加 刺激 了 用 户 的 好 奇 心 ， 促 使 用 户 不 断 扫 摘 福 卡 ， 沉 浸 人 在 集 福 卡 的 活动 中 。 当 然 
常见 的 使 用 场景 还 有 分 享有 礼 、 邀 请 好 友 有 礼 、 分 享 返 还 红包 等 ， 这 些 都 在 一 定 程度 上 提 
高 了 产品 在 其 他 平台 的 曝光 率 。 


了》 邀 好 友 各 得 15 元 全 场 券 


立即 道 请 * 


支付 宝 盒 马 鲜 生 


7. 成 就 系统 

成 就 系统 是 指 产 品 给 予 人 们 精神 上 的 奖励 ， 通 过 特定 的 机 制 ， 用 尸 只 要 按照 一 定 的 方法 去 
执行 就 能 获得 系统 内 一 定 的 成 就 。 在 这 里 运营 机 制 就 是 明确 线索 ， 成 就 就 是 最 终 预 示 的 结 
果 。 例 如 WALKUP 运动 中 的 排名 ， 就 是 通过 用 户 每 日 的 行走 步 数 来 计算 的 。 
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a 下 午 9:54 四 了 89% MN) 
《 排行 榜 9 
bo 世界 排行 
3 87298 © 
i 83476 6 
OQ 67597 8 
令 瑟 全 . 60355 多 
ed 59015 区 

0 m7 57105 @ 


和 52457 @ 


WALKUP 


成 就 系统 大 多 应 用 在 产品 游戏 化 的 场景 中 ， 例 如 常见 的 排名 系统 和 勋章 系统 等 ， 成 就 系统 
能 够 有 效 激 上 友 用 户 的 积极 性 ， 提 高 产品 的 日 活 。 


画 重 点 

(1) 巴 甫 洛 夫 反应 又 称 “条 件 反 射 定律 ”， 它 的 控制 器 是 体内 的 多 巴 胺 系统 ， 针 对 外 界 
的 刺激 ， 身 体会 主动 做 出 反应 。 

(2 ) 巴 甫 洛 夫 反应 的 应 用 范围 较 广 ， 主 要 应 用 场景 必须 建立 在 特定 的 线索 上 ， 线 索 可 预 
示 即 将 友 生 的 事情 ， 能 刺激 用 户 对 此 做 出 反应 。 
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文 / 刘 芳 


在 我 刚 做 设计 时 ， 我 的 总 监 总 说 : “这 个 按钮 应 该 再 大 一 点 ”“ 那 两 个 按钮 离 远 一 
点 ““ 图 标 最 好 放 在 这 个 位 置 ……… 那 时 候 我 总 是 不 理解 为 什么 要 这 样 做 。 和 直到 我 看 到 费 
茨 定 律 才 明白 ， 按 钮 越 大 ， 用 户 操作 所 需 时 间 越 短 ; 距离 越 远 ， 用 户 操作 所 需 时 间 越 长 。 
本 文通 过 一 些 实际 和 案例， 讲述 什么 是 费 茨 定律 及 其 如 何 指导 界面 设计 ， 分 析 它 在 移 动 端 界 
面 中 的 应 用 。 


什么 是 费 深 定律 


费 滨 定 律 是 人 类 运动 的 预测 模型 ， 主 要 用 于 人 机 交互 和 和 人体 工 程 学 。 该 定律 预测 光标 或 手 
指 从 一 个 起 始 位 置 移动 到 最 终 目标 所 需 的 时 | 间 ( 矿 ) 由 两 个 参数 决定 ， 即 光标 或 手指 到 目 
标的 距离 (DD ) 和 目标 的 大 小 (WW) 。 


用 数学 公式 表达 为 =3 +b 10g; (DI/W + 1 )。 其 中 a、b 是 经 验 常数 ，a 代 表 手 指 开 始 到 停 
止 的 时 | 间 ，b 代 表 手 指 的 移动 速度 。 


< 一 |/ 一 一 


一 一 一 
T=a +blog, (DIW+1) 
举 一 个 生活 中 开 灯 的 例子 : 


早期 的 开关 只 有 一 个 手指 大 ， 每 次 开 灯 的 时 候 都 需要 将 手 移 动 到 开关 上 方 ， 然 后 伸 出 手指 
调整 到 适合 位 置 青 按 下 。 由 于 按钮 小 ， 在 没 开 灯 的 时 候 你 根本 不 知道 它 在 哪里 ， 需 要 不 停 
地 摸 ， 所 需 时 间 | 就 比较 长 。 


后 期 大 家 意识 到 了 这 个 问题 ， 将 开关 按钮 设计 得 更 大 ， 人 们 操作 时 只 需要 将 手 移动 到 按钮 
上 方 ， 不 需要 调整 直接 按 下 即 可 ， 所 需 时 间 就 大 大 变 短 了 。 
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早期 开关 -小 按钮 后 期 开关 -大 按钮 


如 何 指导 界面 设计 


费 欧 定律 应 用 比较 广泛 ， 其 对 移动 界面 设计 也 有 很 好 的 局 上 友 意 义 。 结 合 费 注定 律 公式 可 以 
得 出 指导 设计 的 三 个 要 点 : 按钮 越 大 ， 所 需 时 间 越 短 ; 距离 越 远 ， 所 需 时 间 越 长 ; 手 移动 
越 快 ， 越 容易 错误 操作 。 


1. 按钮 越 大 ， 所 需 时 间 越 短 


当 到 目标 的 距离 一 定时 ， 目 标 越 大 ， 所 需 时 间 越 短 ， 反 之 越 长 。 例 如 支付 宝 的 登录 流程 ， 
如 下 图 所 示 : 


Ba | pp Store 5) 党 二 自古 
《“ 焉 回 《 返回 
语言 
忆 忆 
去 支付 宝 188 8888 8B988 
用 海外 手机 号 车 录 
源 宝 用 户 快速 登录 注册 账号 ”过 到 问题 ? 注册 账号 ”过 到 问题 ? 
支付 宝 - 初 始 页 支付 宝 -- 登 录 页 支付 宝 - 刷 脸 登 录 


左 图 是 支付 宝 初 始 页 ， 该 页 面 主 要 让 用 户 选 择 合适 自己 的 操作 方式 。 因 此 在 设计 上 采用 登 
录 和 注册 按钮 并 排 ， 目 标 区 域 较 小 ， 给 用 户 充分 选择 的 时 间 。 


中 图 和 右 图 ， 界 面 中 仅仅 只 有 一 个 按钮 ， 其 他 注册 账号 、 遇 到 问题 、 用 海外 手机 号 登录 、 
换个 方式 登录 等 都 采用 文字 高 亮 的 方式 进行 了 弱化 ， 用 户 使 用 时 不 用 想 就 知道 该 点 击 哪个 
按钮 ， 大 大 减少 了 操作 时 | 旧 ， 让 用 尸 可 以 专注 于 登录 。 
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2. 距离 越 远 ， 所 需 时 间 越 长 
当 按钮 大 小 一 定时 ， 手 到 目标 的 距离 越 远 ， 所 需 时 间 就 越 长 ， 反 之 越 短 。 但 是 这 里 就 发 现 
一 个 问题 ， 移 动 端 如 何 判断 手 到 目标 的 距离 呢 ? 这 里 我 们 可 以 借用 拇指 热 区 来 进行 判断 。 


随 着 手机 越 来 越 大 ， 不 同 机 型 的 拇指 热 区 会 有 所 差异 ， 以 右手 操作 iPhone 6 为 例 ， 它 的 拇 
指 热 区 如 下 图 所 示 : 


@ tx 
@ 人 作 长 手指 级 大 


@ xi 


根据 图 例 可 知 1 号 区 域 是 我 们 手指 最 容易 达到 的 ; 2 号 区 域 是 伸 长 手指 才能 触 达 ， 操 作 相 
对 较 难 ; 3 号 区 域 为 难以 触及 的 区 域 。 我 们 可 以 判断 手指 到 1 号 区 域 的 时 间 最 短 ， 到 3 号 区 
域 的 时 间 最 长 。 因 此 在 设计 时 需要 将 重要 层级 高 的 按钮 放 到 拇指 热 区 手指 能 轻松 触 达 的 部 
分 ， 让 目标 离 手指 更 近 ， 从 而 提高 操作 速度 ， 如 下 图 所 示 : 


大 众 点 评 大 众 点 评 -拇指 热 区 图 
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微 信 读 书 微 信 读书 -拇指 热 区 图 


以 上 两 个 案例 均 是 Feed 流 界面 ， 在 卡片 中 露出 的 功能 有 点 赞 、 评 论 、 分 享 这 三 个 按钮 。 
其 中 ， 大 众 点 评 中 点 赞 的 重要 性 层级 最 高 ， 因 此 将 其 放 在 最 易 触 达 的 绿色 区 域 ， 单 手 操 作 
时 离 手指 距离 最 近 ; 分 享 和 评论 则 放 在 了 手指 伸 长 和 难以 触 达 的 检 色 和 红色 区 域 ， 单 手 操 
作 时 离 手指 更 远 。 


微 信 读书 中 分 享 的 重要 层级 最 高 ， 因 此 将 其 放 在 最 易 触 达 的 绿色 区 域 ， 单 手 操作 更 方便 。 


3. 手 移动 越 快 ， 越 容易 错误 操作 

其 实 不 管 你 手 的 速度 有 多 快 ， 当 距离 较 远 、 按 钮 较 小 时 ， 手 移动 到 按钮 上 方 就 得 停 下 来 进 
行 定位 然后 才能 准确 进行 操作 ， 如 果 只 要 求 速度 ， 手 移动 过 来 直接 点 击 有 可 能 就 点 中 不 了 
按钮 ， 容 易 进行 错误 操作 。 

因此 在 Ul 设计 中 ， 如 果 我 们 想 要 让 用 户 能 够 快速 操作 ， 可 以 为 用 户 打破 距离 和 大 小 带 来 的 
限制 ， 结 合 手势 操作 来 进行 设计 ， 如 下 图 所 示 : 
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微 信 (426) Q 中 微 信 (1) 


本 > 搜索 
a p> 亮 哥 

三” 微 导 运动 本 
be 谨 用 消息 ] 


标 为 已 读 
置顶 公众 号 
取消 关注 
删除 该 聊天 
SB 和 DO A @ 和 @ 2 
书信 ER 复 圳 ! 铀 区 通 污 录 发 现 我 
微 信 - 安 卓 端 微 信 -iOS 端 


以 微 信 为 例 ， 在 微 信 列 表 中 为 了 让 用 户 能 够 快速 操作 列表 ， 引 入 了 手势 操作 〈 安 卓 长 按 、 
iOS 侧 滑 ) ， 当 长 按 或 侧 滑 列表 时 ， 就 会 在 当前 位 置 出 现 操作 内 容 ， 提 高 操作 效率 。 


在 移动 毁 界 面 中 的 应 用 


在 买 际 交 互 设 计 中 ， 合 理 使 用 费 茨 定律 可 以 让 我 们 的 界面 使 用 更 流畅 ， 错 误 率 更 低 。 下 面 
我 们 一 起 来 看 看 费 茨 定律 的 四 大 应 用 场景 。 


1. 来 电 显示 场景 一 一 不 同 状 态 ， 不 同 设计 万 式 
iOS 的 来 电 提示 在 锁 屏 和 苏醒 状态 分 别 采 用 滑动 接听 和 点 击 接听 ， 可 以 很 好 地 用 费 茨 定律 
来 解释 。 


锁 屏 时 : 用 户 手机 场景 不 确定 ， 很 容易 意外 点 击 。 在 设计 时 就 需要 增加 操作 距离 、 延 长 操 
作 时 | 旧 ， 防 止 误 操作 的 情况 。 采 用 滑动 解锁 可 以 增加 操作 的 距离 ， 放 在 该 场景 中 使 用 较为 
合适 。 

苏醒 时 : 用 户 正在 使 用 手机 ， 这 时 候 采 用 滑动 操作 距离 太 长 了 ， 因 此 设计 为 按钮 的 样式 ， 
用 户 可 快速 点 击 接受 或 拒绝 ， 进 而 提高 用 户 操作 效率 。 
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S 写 58 3 sssocoGS 全 


188 8888 8888 188 8888 8888 
北京 


北京 


锁 屏 状态 -来 电 苏醒 状态 -来 电 


2. 将 返回 浮 于 底部 操作 栏 中 一 一 缩短 操作 距离 和 时 间 

随 着 屏幕 越 来 越 大 ， 拇 指 热 区 也 发 生 了 变化 ， 你 会 发 现 左上 角 的 返回 按钮 单 手 操作 越 来 越 
不 可 能 ， 尤 其 是 Plus、iPhone X 的 出 现 使 返回 按钮 显得 有 点 鸡肋 。 不 过 在 体验 资讯 类 的 
产品 时 发 现 ， 它 们 将 部 分 界面 的 返回 按钮 放 到 了 界面 底部 左下 角 的 位 置 ， 下 面 将 对 这 两 种 
情况 进行 对 比 ， 如 下 图 所 示 : 


今日 头条 虎 响 
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以 今日 头条 的 详情 页 为 例 ， 返 回 按钮 在 常规 的 左上 角 。 结 合 拇指 热 区 会 帮 现 左上 角 的 区 域 
单 手 是 很 难 到 达 的 。 对 于 资讯 类 App 需 要 不 断 切 换 看 的 文章 ， 返 回 键 在 左上 角 无 疑 加 重 了 
操作 难度 。 


以 谍 嗅 为 例 ， 它 将 返回 按钮 移动 到 了 底部 左下 角 ， 结 合 拇指 热 区 会 友 现 元 下 角 的 区 域 单 手 
是 可 以 轻松 到 达 的 。 将 返回 按钮 放 在 底部 ， 大 大 地 节约 了 用 户 的 操作 时 间 。 

需要 注意 的 是 ， 尽 管 通过 分 析 得 出 返回 按钮 在 左下 角 时 单 手 更 好 操作 ， 但 是 有 时 候 习 惯 真 
的 是 一 件 可 怕 的 事情 。 例 如 我 在 使 用 华西 医院 的 微 信 公 众 号 挂号 时 ， 很 少 能 够 记 住 点 击 底 


部 的 前 进 和 后 退 键 ， 每 次 想 返 回 上 一 级 ， 就 习惯 性 地 点 左上 角 ， 结 果 就 直接 退出 了 ， 如 下 
图 所 示 : 


= 村 中 国 移动 令 上 午 1:13 @7Y + 
XxX 华西 第 二 医院 -在 线 问 诊 


产科 


妇科 儿科 计划 生育 / 生 
作业 日 日 
优生 学 科 / 产 ”生殖 医学 中 ， 超声 科 人 类 精子 库 


展开 


服务 电话 : 028-85085983 4 检验 检查 项 目 说 骨 》 


面 对 顶 部 返回 键 单 手 不 方便 点 击 、 底 部 返回 键 又 老 是 记 不 住 的 情况 ， 怎 么 样 才能 帮助 用 户 
操作 呢 ? 当 手机 都 是 全 面 屏 之 后 ， 就 不 需要 担心 这 个 问题 ， 你 直接 及 用 全 面 屏 手势 即 可 ， 
更 万 便 快 捷 。 


3. 合理 利用 手势 操作 一 一 提高 用 户 操 作 速 度 
安 卓 的 长 按 和 iOS 的 侧 滑 编 辑 大 家 都 比较 熟悉 ， 它 们 多 用 在 列表 页 的 编辑 状态 ， 用 户 长 按 
或 侧 滑 列表 ， 操 作 按钮 就 显示 在 当前 位 置 ， 操 作 效率 比较 高 。 
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以 天 猫 购物 车 为 例 ， 长 按 相 侧 滑 唤 出 按钮 的 两 种 功能 都 支持 。 其 主要 原因 是 考虑 到 安 卓 用 
户 在 使 用 苹果 手机 时 ， 可 能 不 知道 人 出 滑 的 功能 ， 因 此 在 购物 车 的 编辑 中 保留 两 种 ， 让 用 户 
E 够 更 快捷 地 操作 。 


Hi 中国 移动 全 下 午 4:10 7 + 中国 移 动 他 下 午 4:10 750 
购物 车 管理 购物 车 管理 
中 无 印 良 品 MUJI 官 方 了 无 印 民 品 MUJI 官 方 统 关 
MUJI 棉 平 织 柔软 家 居 鞋 栅 平 织 柔软 家 居 鞋 
Ymm - 半 格 纹 ;L， 280mm (2.0 以 
天 猫 AE 发 现 
0 TY 
加 移入 收藏 严 1 床 用 水 洗 棉 【网 络 限定 】MUJI 床 用 水 先 赵 


被 套套 靳 
究 (2 黄色 格 拟 ; 贸 赛 以 枕 赛 (2 
es MUJI 棉 条 纹 面市 MUJI 棉 条 弘 而 由 
m 2 闲 闭 莫名 m 2 条 装 廿 
en 
[后 汪 优 剧 满 300 元 , 享 包 时 


注 300 元 , 享 包 


S -A 


4. 将 操作 按钮 进行 收纳 一 一 阻碍 用 户 操 作 


在 设计 时 如 果 某 个 功能 不 经 常 使 用 ， 或 者 想 阻 碍 用 户 操 ， 可 以 把 操作 按钮 放 远 一 点 或 将 其 
收纳 ， 加 大 用 户 的 操作 难度 ， 如 下 图 所 示 : 
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以 大 众 点 评 详情 为 例 ， 在 右上 角 并 没有 直接 放 “ 举 报 ” 按钮， 而 是 放 到 “更 多 ”按钮 之 
下 ， 一 个 原因 是 为 了 方便 后 期 的 拓展 ， 另 外 一 个 原因 就 是 增加 用 户 的 操作 难度 。 


男 重 点 


本 文 主要 分 享 了 费 淘 定 律 在 UI 界面 中 的 应 用 ， 主 要 有 四 个 要 扣 : 
(1 ) 想 要 更 容易 点 击 到 目标 ， 就 需要 将 一 个 页 面 的 主 操作 按钮 放大 。 


(2 ) 想 要 让 用 户 快 速 点 击 目标 ， 方 便 操作 ， 可 以 将 目标 放 于 拇指 热 区 中 轻松 触 达 的 
区 域 。 


(3 ) 想 要 让 用 户 快 速 移动 时 ， 就 可 以 利用 手势 操作 ， 它 可 以 打破 距离 和 大 小 的 限制 ， 从 
而 让 用 户 可 以 快速 操作 。 


(4 ) 不 想 让 用 户 操作 的 按钮 或 不 常用 的 按钮 ， 可 以 将 其 进行 收纳 ， 加 大 用 户 操作 距离 ， 
从 而 增长 用 户 的 操作 时 间 。 


参考 资料 
设计 法 则 : Fitts Law / 费 滨 定律 ( 费 滨 法 则 ) http://t.cn/RAqxBrY 


威廉 。 立 人 德 威 尔 ， 殉 里 蒂 娜 。 霍 顿 ， 吉 尔 。 巴特 勒 . 通用 设计 法 则 [M]. 朱 占 星 ， 评 江 ， 译 . 
北京 : 中 央 编 译 出 版 社 ，2013 
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05 五 大 交互 心理 学 


文 / 姜 正 


马克 “。 吐 温 说 过 : “ 当 你 手 里 只 有 锤子 的 时 候 ， 那 么 看 待 什么 问题 都 像 钉 子 。 ”作为 UI 
设计 师 ， 如 果 只 是 单纯 地 提高 目 己 的 视 沉 能力， 那么 看 竺 任何 问题 都 只 是 视觉 问题 。 如 果 
是 这 样 的 话 ， 在 工作 中 很 难 去 说 服 别 人 接受 自己 的 设计 提案 ， 因 为 我 们 无 法 通过 多 维度 的 
理论 知识 来 佐证 自己 设计 的 合理 性 ， 所 以 作为 设计 师 我 们 必须 要 民心 理学 。 


在 日 常设 计 中 有 比较 常用 的 五 大 交互 心理 学 理论 ， 分 别 是 7 + 2 效应 、 席 克 定 律 、 羔 斯 托 夫 
效应 、 本 能 反应 、 色 彩 心理 学 。 心 理学 知识 可 以 辅助 大 家 为 自己 的 设计 建立 逻辑 严谨 的 理 
论 依据 。 


7 土 2 效应 


1. 7 土 2 效应 的 定义 

7 土 2 效应 最 早 是 在 19 世 纪 中 叶 ， 由 爱尔兰 哲学 家 威廉 。 汉 密 尔 顿 观察 到 的 。 直 到 1956 
年 ， 美 国 心理 学 家 米 勒 ( George A. Miller ) 教授 发 表 了 一 篇 重要 的 论文 《神奇 的 数字 
7 土 2: 我 们 加 工人 信息 能 力 的 某 些 限制 》， 明 确 提 出 短 时 记忆 的 容量 为 7 + 2， 即 一 般 为 7 并 
在 5~9 之 间 波 动 。 这 就 是 神奇 的 7 土 2 效 应 。 


如 果 需 要 我 们 记忆 的 是 熟悉 的 字 词 或 数字 ， 这 样 短 时 记忆 还 只 能 容纳 7 个 吗 ? 例如 c-o-o- 
p-e-r-ar-t-i-o-n， 这 个 字母 序列 已 经 有 11 个 字母 ， 如 果 学 过 英语 的 人 听 到 这 个 序列 很 
快 就 能 明日 这 是 个 词 ， 意 思 是 “合作 ”， 并 能 很 好 地 回忆 出 来 ， 这 不 是 违背 了 短 时 记忆 的 
“7 土 2 效应 ”了 吗 ? 不 是 的 ， 这 恰恰 是 该 效应 存在 的 另 一 个 奇特 的 现象 。 


豆 时 记忆 中 的 信息 单位 “组 块 ”本身 具 有 神奇 的 弹性 ， 一 个 字母 是 一 个 组 块 ， 一 个 由 多 个 
字母 组 成 的 字 词 也 是 一 个 组 块 ， 甚 至 可 以 通过 一 些 方法 把 小 一 些 的 单位 联合 成 为 熟悉 的 、 
较 大 的 单位 ， 而 且 对 知识 的 熟悉 程度 还 会 对 它 产 生 影响 。 
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7 + 2 效应 是 指 人 的 短期 记忆 容量 在 7 + 2 的 数量 之 间 浮 动 ， 也 就 是 说 ， 用 户 最 多 同时 
处 理 5 ~ 9 个 信息 ; 同时 我 们 也 可 以 把 一 些小 的 单位 联合 组 成 熟悉 的 、 较 大 的 单位 方 
便 记忆 。 


2.7 土 2 效应 的 作用 


1 ) 降低 识别 成 本 

通过 将 一 些小 的 单位 联合 组 成 熟悉 的 、 较 大 的 单位 方便 用 户 记忆 。 最 常见 的 例子 就 是 电话 
号 码 的 模块 组 合 ， 通 常情 况 下 被 割裂 成 3-4-4 的 组 合 方式 ， 减 轻 用 户 的 记忆 难度 。 例 如 大 
众 点 评 的 注册 页 面 和 电话 呼叫 弹 窗 ， 都 遵循 了 7 + 2 法 则 。 


中 国 +86 ”188 8888 8888 


(010) 6868 2286 


大 众 点 评 


2 ) 优化 选项 数量 
大 部 分 产品 导航 栏 的 功能 图 标 在 一 屏 之 内 都 不 会 超过 7 个 ， 这 正 是 借鉴 了 7 + 2 效应 。 


关 泣 推荐 热点 北京 视频 国 风 三 关注 。” 爱 美 食 ” 出 去 浪 。” 键 康生 活 


今日 头条 美 团 
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3 ) 优化 界面 布局 

侍 界 面 布 局 的 优化 上 同样 可 以 借鉴 7 土 2 效 应 。 可 以 将 首 屏 界面 的 功能 模块 切 分 成 5 个 左 
右 ， 符 合 人 们 短 时 记忆 的 容量 ， 通 过 有 效 组 织 功 能 ， 节 省 用 户 的 记忆 成 本 ， 提 高 用 户 
的 操作 效率 。 


例如 ， 支 付 宝 的 首页 设计 将 主要 功能 分 成 5 个 模块 ， 将 小 单位 的 功能 组 合成 大 单位 的 功能 
模块 ， 通 过 组 合 优化 界面 功能 的 分 布 。 用 户 可 以 先 寻找 大 的 功能 模块 ， 再 寻找 小 的 功能 模 
块 ， 虽 然 增加 了 交互 路 径 ， 但 是 却 提高 了 用 户 的 选择 效率 和 减少 了 用 尸 的 记忆 成 本 。 


-人 PS 。 -余额 宝 收益 到 账 啦 刚刚 
， 尝 由 。 你 有 支付 宝 积 分 待 领取 7 小 对 前 


司 殉 定律 


1. 席 殉 定律 的 定义 

席 克 定律 ， 又 称 “ 席 克 -- 海 曼 定律 ”， 是 1952 年 由 席 克 和 R. 海 曼 在 选择 反应 时 研究 中 得 
到 。 研 究 表明 ， 人 的 信息 传递 时 间 与 刺激 的 平均 信息 量 之 间 呈 线性 关系 。 简 单一 点 我 们 可 
以 理解 为 ， 人 面临 越 多 的 选择 ， 所 要 消耗 的 时 间 成 本 越 高 。 
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用 数学 公式 表达 为 : RT=a+b xlogz(n)， 其 中 ，RT 表 示 反 应 时 间 ，a 表 示 跟 做 决定 无 关 
的 总 时 间 ，b 表 示 根 据 对 选项 认 知 的 处 理 时 间 实 证 衍生 出 的 常数 ，n 表 示 同 样 可 能 的 选项 
数量 。 


2. 席 克 定律 的 作用 


1 ) 提高 选择 效率 

为 了 提高 用 户 的 选择 效率 ， 我 们 需要 尽 可 能 将 多 余 的 选项 删除 ， 只 留 下 能 够 满足 用 户 需 求 
的 选项 ; 否则 用 户 会 因为 选项 过 多 而 犹 耶 不 决 ， 造 成 时 间 成 本 直线 上 升 而 导致 用 户 放 弃 当 
前 操作 。 


例如 我 们 平时 的 弹 窗 设 计 ， 只 为 用 户 提 供 “ 同 意 ” 和 “不 同意 ”两 种 类 型 的 选项 ， 这 种 情 
况 下 用 户 可 以 根据 自己 的 实际 需求 瞬间 选择 ， 而 不 需要 人 在 多 个 选项 中 进行 思考 ， 消 耗 过 多 
的 时 间 和 精力 。 


确认 删除 选中 的 漫画 吗 ? 


腾讯 漫画 
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2 ) 提高 信息 获取 效率 

如 果 面 对 大 量 杂 乱 的 信息 ， 我 们 需要 人 花 更 多 的 时 间 精 力 去 做 分 辨 ， 信 息 获 取 效 率 极 低 。 面 对 
这 种 情况 ， 同 样 可 以 借助 席 克 定律 去 处 理 信 息 ， 将 同类 型 或 相关 联 的 信息 进行 组 织 归 纳 ， 将 
较 多 的 信息 转变 成 较 少 的 信息 组 ， 面 对 较 少 的 信息 组 用 户 可 以 快速 地 浏览 其 中 的 信息 。 


例如 一 些 页 面 中 的 简介 ， 将 同类 或 者 相关 联 的 信息 进行 编组 处 理 ， 将 原本 较 多 的 信息 转变 
成 较 少 的 信息 组 ， 减 轻 了 用 户 原 本 需要 对 全 部 信息 进行 筛选 处 理 的 工作 ， 转 变 成 快速 阅读 
信息 组 即 可 。 


例如 ， 淘 票 票 的 详情 页 通过 对 同类 型 信息 的 组 合 ， 帮 助 用 户 实 现 对 信息 进行 检索 再 组 合 认 
知 的 过 程 ， 减 少 了 用 户 的 成 本 输出 ， 提 高 了 用 户 的 阅读 效率 。 


四 搜索 will 全 下 午 5:54 7 45% 面 ，) 


《 流浪 地 球 Cz 
The Wandering Earth 


3 ) 提高 用 户 体 验 
当 用 户 在 处 理应 用 操作 的 时 候 ， 所 消耗 的 成 本 越 少 ， 心 情 自 然 会 更 加 愉悦 。 
假如 在 进行 一 系列 复杂 操作 的 时 候 ， 如 果 将 所 有 选项 都 聚集 在 一 起 ， 面 对 诸多 复杂 的 选项 


会 给 用 户 造 成 极 大 成 本 消耗 ， 最 终 给 用 户 造 成 极 差 的 体验 。 反 之 ， 我 们 将 所 有 选项 拆 解 、 
归 类 ， 让 用 户 按照 一 定 的 步骤 在 每 一 个 界面 尽量 做 少 的 选择 ， 这 样 虽 然 增加 了 交互 路 径 ， 
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但 会 营造 一 种 较为 舒适 的 用 户 体 验 。 


例如 same 将 创建 频道 的 过 程 分 成 4 步 ， 每 一 步 用 户 只 需要 面 对 少 量 的 选项 ， 将 用 户 的 认 知 
时 间 成 本 降 到 了 最 低 ， 为 用 户 创造 了 愉快 的 体验 。 


Py 年 6 46% Ml my os iL Fg -Mu si 中国 各 漠 字 8% 
< 向 请 创建 到 遂 < 请 哆 捍 你 要 创建 的 倘 道 属性 < 建委 道 党 型 < 创建 硬 文 回 沸 
公共 频 通 By 和 时 型 
一 到 一 为 通 铺 交 志 坊 相近 的 铺 丰 
大 5 文 阐 煞 遂 全 站 子 可 以 丰 拉 呈 天 
© 通 疝 绩 道 
四 济 乐 频道 
评论 型 
个 人 频道 © 电影 频道 对 怠 发 布 有 大 的 话题 ， 引 发 大 稼 共计 讨论 
创建 属于 你 的 小 天 地 ， 自 
的 故事 相 销 结 中 下 二 可 以 雷 高 华 信 
@ 5 
© 打卡 恩 浇 人 - [2 EET 
| \ @ EE 7 确认 提交 


Same 


莱 斯 朱 夫 效应 


1. 莱 斯 托 夫 效应 的 定义 
莱 斯 托 夫 效应 指 的 是 相对 于 普通 事物 ， 记 住 独特 事物 的 可 能 性 更 大 。 我 们 可 以 简单 理解 
为 : 特殊 事物 才 易 被 人 牢记 。 


莱 斯 托 夫 效应 的 主要 成 因 ， 来 自 人 们 会 格外 注意 一 些 东西 里 的 某 个 特殊 目标 ， 其 具有 相对 
性 。 例 如 图 片 中 我 们 第 一 眼看 到 的 就 是 红色 的 圆 形 ， 因 为 相对 于 当前 的 环境 单个 物体 具有 
特殊 性 才 使 得 我 们 对 红色 的 圆 形 印 象 深 刻 。 
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2. 莱 斯 拓 夫 效应 的 作用 


1 ) 发 生 莱 斯 托 夫 效 应 的 必要 条 件 

莱 斯 朱 夫 效应 发 生 的 必要 条 件 就 是 目标 对 象 要 与 当前 “背景 不 同 ”或 “经 验 不 同 ， 产 生 
相对 的 比较 。 接 下 来 我 们 会 以 背景 不 同和 经 验 不 同 为 前 提 条 件 ， 分 析 一 下 羔 斯 拓 夫 效应 的 
作用 。 


2 ) 背景 不 同 
在 当前 环境 下 ， 某 个 元 素 与 周围 元 素 具 有 明显 的 不 同 ， 就 发 生 了 与 “背景 不 同 ” 的 情况 ， 
即 通 过 将 周围 元 素 作为 背景 来 突出 主体 元 素 。 


在 界面 设计 当中 ， 我 们 通过 区 别 设计 样式 来 突出 某 个 功能 。 例 如 在 底部 导航 栏 中 ， 我 们 为 
了 突出 其 中 的 核心 功能 ， 会 将 它 做 加 强 处 理 ， 例 如 放大 图 标 、 填 充 背 景色 等 ， 来 使 其 区 别 
于 其 他 功能 的 图 标 设 计 样 式 ， 如 下 图 所 示 : 


© =. ea 人 
nice 转 转 


我 们 可 以 明显 看 到 nice 的 “发 布 ” 和 转 转 的 “ 卖 二 手 ”图 标 区 别 于 其 他 的 图 标 设 计 ， 有 
利于 突出 核心 功能 ， 吸 引用 户 点 击 。 


3 ) 经 验 不 同 

当 现 在 所 发 生 的 事情 与 过 去 经 验 有 显著 不 同时 ， 就 会 发 生 “ 经 验 不 同 ” 的 情况 。 通 过 营 
造 与 过 去 经 验 不 同 的 场景 ， 触 上 肥 莱 斯 托 夫 效应 ， 加 强 用 户 的 记忆 点 或 者 增强 对 用 户 的 吸 
引力 。 


例如 现在 每 年 的 电 商 购物 节 ， 界 面 设 计 和 消费 场景 会 明显 区 别 于 日 常 的 电 商 界面 ， 通 过 对 
设计 风格 和 消费 场景 的 定制 化 设计 ， 加 深 用 户 的 印象 ， 同 时 扩大 了 活动 对 用 户 的 影响 力 ， 
如 下 图 所 示 : 
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3 : | 11:1 人 放生 
-7 QA 和 
-dr 4 
| 4 
x ~ 
| A 二 Ee ; 
CE 到 有 所 中 入 了 he 
精品 推荐 peg ~ 
Ea ED Er 


定期 98 天 教育 分 期 


活期 理财 
6.100» 4.800» 机 


懂 生 活 由 你 所 想 便捷 生活 
加 穴 东 了 国 到 : 热 厨 卫 衣装 自 营 3 件 88 折 ! 。 更 多 
| 免 
O © 内 7 禹 准 7 10 点 场 00 :46 :48 团 国 | 剂 浆 足 珍贵 轩 
EE 团购 电影 转 野 
回 @ 未 击 
手机 充 信 一 元 许愿 信用 卡 还 堵 办 信用 卡 


1. 本 能 反应 的 定义 


本 能 反应 实际 上 是 情感 设计 的 一 种 ， 指 在 特定 的 情境 下 人 们 心理 上 和 情感 上 的 反应 ， 而 不 
是 单纯 的 美学 设计 。 


2. 本 能 反应 的 误解 
人 们 对 于 本 能 设计 时 常会 存在 一 个 误解 ， 认 为 “漂亮 美观 ”的 设计 即 是 本 能 反应 。 这 种 想 
法 是 错误 的 。 人 们 本 能 地 喜爱 美好 且 美 观 的 事物 ， 但 这 并 不 能 单一 地 定义 本 能 反应 。 


更 加 有 趣 的 是 ， 人 们 会 认为 漂亮 具有 吸引 力 的 界面 更 加 好 用 ， 并 对 这 个 观念 坚持 很 久 ， 直 
至 付出 巨大 的 成 本 ， 积 累 了 足够 的 经 验 之 后 ， 才 会 放弃 并 推翻 之 前 的 理论 。 
3. 本 能 反应 的 应 用 


1 ) 营造 美观 的 界面 
喜欢 视 党 美观 的 物品 是 本 能 反应 之 一 ， 所 以 设计 中 我 们 要 尽 可 能 保持 界面 的 美观 。 和 营造 出 
亮 、 具 有 美学 设计 感 的 界面 更 容易 受到 用 户 青睐 。 例 如 人 在 设计 中 ， 我 们 要 选用 精美 
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的 图 片 ， 避 免 出 现 低 品 质 图 片 带 来 的 不 适 感 。 因 为 优质 的 图 片 企 构图 上 更 加 考究 、 色 调 更 
加 统一 ， 给 人 的 感觉 更 加 舒适 。 而 低 品 质 的 图 片 在 构图 和 色调 上 会 显得 杂乱 无 章 ， 一 眼看 
上 去 则 是 满 满 的 务 质 感 。 


中 国联 通 全 下 午 9:01 7 35%0 will 中 国联 通 全 下 午 9:01 了 35% 
< The Pit 关注 季 < The Pit 关注 从 


Same 


2 ) 满足 情感 设计 

本 能 反应 作为 情感 化 设计 的 一 种 ， 需 要 我 们 处 处 为 用 户 着 想 ， 在 细节 上 满足 用 户 对 于 情感 
设计 的 需求 。 例 如 淘 票 票 中 的 电影 详情 页 ， 将 电影 的 预告 片 提 到 项 部， 用 户 可 以 直接 查看 
预告 上 请， 从 而 引起 情感 共鸣 ， 而 不 是 再 去 下 拉 寻 找 才 能 观看 。 
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1. 色彩 心理 学 的 定义 

色彩 心理 学 由 视 党 开始， 从 知觉 、 感 情 友 展 到 记忆 、 思 想 、 意 志 、 象 征 等 ， 其 反应 与 变化 
是 极为 复杂 的 。 色 彩 的 应 用 很 重视 因果 天 系 ， 即 由 对 色彩 的 经 验 积 紧 而 变 成 对 色彩 的 心理 
规范 ， 当 受到 什么 刺激 后 能 产生 什么 反应 ， 都 是 色彩 心理 学 所 要 探讨 的 内 容 。 


2. 色彩 心理 学 的 应 用 
不 同 的 色彩 在 不 同 的 国家 与 地 区 存在 着 不 同 的 含义 ， 在 这 里 我 们 不 会 展开 进行 详细 论述 ， 
核心 关注 的 是 色彩 给 用 户 带 来 什么 样 的 感受 和 作用 。 


1 ) 信息 指示 

经 过 社会 长 期 的 发 展 与 培养 ， 人 们 对 色彩 已 经 有 相对 成 熟 的 认 知 ， 色 彩 能 够 帮助 产品 来 传 
递 信 息 ， 例 如 绿色 有 “同意 ”的 意思 、 红 色 有 “反对 ”的 意思 、 柳 黄色 有 “警告 ”的 意 
思 ， 最 典型 的 案例 就 是 红绿灯 。 


在 界面 设计 中 我 们 需要 在 图 形 化 的 基础 上 结合 色彩 更 好 、 更 准确 地 传递 信息 ， 引 | 导 用 尸 。 
例如 ， 我 们 通常 用 红色 的 按钮 表示 “反对 ”或 “删除 ”的 意思 ， 而 用 灰色 表达 的 信息 则 更 
加 隐 星 ， 如 下 图 所 示 : 
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4 中 中 国联 通 全 下 午 3;54 侈 了 88% Eas 
微 信 (6) 中 
Q 搜索 


下 午 3:44 
项 供给 侧 结构 性 改革 不 再 关注 
订阅 号 消息 上 午 9:09 
海 起 社 : 关于 界面 分 割 的 这 件 小 事 


微 信 运动 
[应 用 消息 ] 


微 信 


2 ) 建立 印象 
色彩 是 能 给 人 建立 第 一 印象 的 重要 因素 ， 例 如 我 们 经 常 听 到 “这 个 界面 的 配色 很 高 级 ， 
或 者 “这 个 界面 看 起 来 很 干 兆 ”等 ， 都 是 色彩 为 用 户 建立 的 第 一 印象 。 


在 色彩 的 使 用 上 ， 我 们 要 学 会 克制 ， 避 免 大 量 使 用 高 饱和 度 的 颜色 。 首 先是 因为 人 眼 对 于 
低 饱 和 度 色 彩 的 忍耐 度 更 局 ， 其 次 是 因为 相对 于 高 饱和 度 的 色彩 而 言 ， 低 饱和 度 的 色彩 在 
色调 上 更 加 统一 、 称 重 ， 具 有 品质 感 。 例 如 莫 三 迪 的 画作 : 


在 界面 设计 当中 ， 我 们 可 以 看 到 优秀 的 设计 在 色彩 的 控制 上 把 握 得 十 分 精准 ， 整 体 页 面 中 
避免 出 现 大 量 高 饱和 色彩 ， 尽 量 选 用 同色 系 的 色彩 进行 设计 ， 这 样 能 有 效 保证 页 面色 调 统 
一 ， 给 予 用 户 良 好 的 印象 。 例 如 Fancy 的 界面 中 统一 使 用 冷色 调 ， 搭 配 冷 灰色 ， 使 页 面 
显示 得 主 次 分 明 且 能 保证 页 面 整体 色调 的 统一 。 
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4 晶 中 国联 通 含 …: 下 午 5:00 全 7 94% mn 


Explore 


Q What are You looking for? 


SPODIOPROPER 


男 重 点 


本 文 着 重 分 享 了 设计 中 常用 的 五 大 交互 心理 学 ， 这 里 再 回顾 一 下 它们 的 核心 定义 ， 以 便 大 
家 记忆 和 运用 |: 


( 1 ) 7+2 效 应 是 指 人 的 短期 记忆 容量 在 7 + 2 的 数量 之 间 浮 动 ， 也 就 是 说 用 户 最 多 同时 
处 理 5 ~ 9 个 信息 ; 同时 我 们 也 可 以 把 一 些小 的 单位 联合 组 成 为 熟悉 的 、 较 大 的 单位 方便 
记忆 。 


(2 ) 席 克 定律 的 核心 意义 是 人 面临 的 选择 越 多 ， 所 要 消耗 的 时 间 成 本 越 高 。 


( 3 ) 莱 斯 托 夫 效应 指 的 是 相对 于 普通 事物 ， 人 们 记 住 独特 事物 的 可 能 性 更 大 。 我 们 可 以 
简单 理解 为 : 特殊 事物 才 易 被 人 牢记 。 需 要 注意 引发 莱 斯 托 夫 效应 的 两 个 必要 条 件 是 “ 背 
景 不 同 ” 和 “经 验 不 同 ”。 


(4 ) 本 能 反应 实际 上 是 情感 设计 的 一 种 ， 指 在 特定 的 情境 下 人 们 心理 上 和 情感 上 的 反 
应 ， 而 不 是 单纯 的 美学 设计 。 


( 5 ) 色彩 心理 学 是 一 种 注重 因果 关系 的 心理 学 说 ， 侧 重 于 观看 色彩 之 后 产生 的 感受 ， 属 
于 请 由 设计 中 的 一 种 . 
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参考 资料 
常用 的 几 个 设计 心理 学 ”https://dwz.cn/C0ODmajlP 


设计 心理 学 : 帮助 设计 师 更 好 地 了 解 用 户 ” https://dwz.cn/VDX6QC79 
设计 心理 学 概述 https://dwz.cn/7tBXY0Ci 

百度 百科 : 7+2 法 则 https://dwz.cn/3lgqrCFN8 

设计 法 则 : 7 十 2 法 则 https://dwz.cn/ZpdjMlan 

莱 斯 托 夫 效应 ”https://dwz.cn/pUIrCZr4 


设计 心理 学 之 楚 雷 斯 托 夫 效 应 ”https://dwz.cn/bqBaOvRF 
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06 ”尼尔森 十 大 可 用 性 原则 


文 / 付 钼 更 


尼尔森 十 大 可 用 性 原则 是 十 分 基础 且 重 要 的 原则 ， 如 何 正确 将 其 结合 到 实际 运用 中 才 是 关 
键 。 接 下 来 我 会 将 每 一 个 原则 和 现在 的 移动 端 产品 结合 进行 分 析 ， 希 望 读 者 可 以 更 深入 地 
记 住 它们 。 


尼尔森 是 谁 


尼尔森 ( Jakob Nielsen ) 是 一 位 人 机 交互 学 博士 ， 于 1995 年 1 月 1 日 帮 表 了 “十 大 可 用 
性 原则 ”。1995 年 以 来 ， 他 通过 自己 的 Alertbox 邮件 列表 以 及 useit.com 网 站 ， 向 成 干 
上 万 的 网 页 设计 师 传授 网 页 易 用 性 方面 的 知识 。 尽 管 他 的 一 些 观 点 可 能 带 来 争议 ， 但 至 少 
在 网 页 设计 师 眼 中 ， 他 是 网 页 易 用 性 领域 的 顶尖 领袖 。 


十 大 可 用 性 原则 解析 与 案例 


1. 状态 可 见 性 原则 


用 尸 在 手机 上 的 任何 操作 ， 如 上 下 滑动 刷新 、 扣 击 跳 转 页 面 等 都 应 该 即时 给 出 反馈 。“ 即 
时 ”是 指 页 面 响应 时 间 小 于 用 户 能 忍受 的 等 待 时 间 。 


案例 一 
如 下 图 所 示 ， 微 信 中 扣 赞 的 样式 ， 手 指 触 碰 按 钮 时 ， 颜 色 加 深 通过 改变 颜色 告知 用 户 目 
前 按钮 的 状态 已 被 激活 。 


ee 中 国 移动 全 上 午 12:32 1 wo 宁国 移动 全 上 午 12:33 7 


《发 现 朋友 图 [9] 《发 现 朋友 转 [9] 
s 小 溜 Epik 全 小 溜 Epik 


微 们 读书 无 限 卡 ， 全 场 书籍 免费 读 国 徽 信 读书 无 限 卡 ， 全 场 书籍 免费 读 


大 人 党 入 读书 时时 有 芝 业 四 评论 


微 信 
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案例 二 


如 下 图 所 示 ， 网 易 云 音乐 中 ， 当 我 们 点 击 “+ 关 注 ” 时 ， 界 面 中 关注 标签 的 状态 会 及 时 更 
新 为 “WV” 展示 给 用 户 ， 通 过 点 击 后 的 形状 改变 告知 用 户 操作 已 完成 。 这 种 状态 可 见 性 可 
以 清晰 地 让 用 户 感 受到 页 面 即时 给 出 的 反馈 。 


雾 与 晨 的 杂货 店 分 享 单 曲 : 雾 与 展 的 杂货 店 分 享 单 曲 : 
与 ED 与 2 


案例 三 


如 下 图 所 示 ， 当 我 们 下 拉 界 面 刷 新 时 ， 界 面 上 方 会 出 现 动画 加 载 的 效果 。 这 种 状态 可 见 性 
是 最 明显 的 ， 可 以 清晰 地 让 用 户 感 受到 页 面 即时 给 出 的 反馈 。 


马蜂 离 火球 买 手 


上 面 是 关于 状态 可 见 性 原则 在 产品 中 的 常见 案例 ， 当 然 除 了 这 三 个 还 有 很 多 ， 例 如 点 击 列 
表 、 界 面 模 滑 时 等 。 我 们 在 设计 实际 界面 中 ， 一 定 要 谨 记 设计 出 对 应 的 可 见 状态 ， 避 免 用 
户 使 用 时 以 为 操作 无 效 。 


2. 环境 贴切 原则 


简单 地 说 就 是 产品 设计 符合 真实 世界 中 用 户 的 使 用 习惯 和 思考 逻辑 ， 尽 可 能 贴近 用 户 所 在 
的 环境 (年 龄 、 学 历 、 文 化 、 时 代 背 景 等 )， 而 不 要 使 用 生 侣 的 语言 ， 应 该 使 用 易 懂 和 约定 
俗 成 的 表达 。 


案例 一 


DaDaBaby 和 TutorABC 同 是 学 英语 的 产品 ， 由 于 产品 所 面向 用 户 的 年 龄 、 学 历 、 文 化 不 


人 了 
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se9*00 中 国 傍 动 富 下 午 10:02 了 三 wm *9#00 中 国政 动 合 下 午 10:38 EE 
局 登录 解锁 精彩 内 容 我 的 课程 > 继续 订 课 + 
[英文 演讲 | 技巧 秘诀 大 公开 ! 【#9 ] 


旅游 会 话 大 汇 打 : 当 沙发 必 安 全 9? 。 3》 


DaDaBaby TutorABC 


DaDaBaby 是 针对 幼儿 学 英语 ， 所 以 界面 风格 活 泌 可爱， 颜色 鲜艳 ; 而 TutorABC 是 针对 
成 年 人 学 英语 ， 界 面 简 洁 、 严 肃 。 这 就 是 产品 风格 与 环境 贴切 。 
案例 二 


优酷 为 视频 类 产品 ， 饿 了 么 为 外 卖 类 产品 ， 虽 然 它 们 的 定位 不 同 ， 但 是 在 世界 杯 期 司 ， 都 
替换 了 界面 的 皮肤 ， 如 下 图 所 示 : 


SS 
下 


9 白 庙 小 区 ( 西 1 门 ) * 


pn 
A 


全 景 回 后 
.SA 


但 生 租 门 阿 限 延 鞋 均 法 习 交 罗 地 亚 3 村 肝 


及 Si nE 时 其 卫 语 导 
全 部 囊 扯 。 宙 今 杭 。 散 说 世界 杯 安 事 看 点 我 的 世界 村 大 限 买 机关 亚 药 刍 雪 型 品 饮 品 站 对 执 苍 
nw 


6 月 27 日 F 组 第 3 轮 6 月 27 日 F 组 车 
5 限量 抢购 周一 预订 日 
二 (小 22:00 5 9, 22:00 般 协 夜宵 9.9 元 起 电汇 早 送 达 
; 罗 地 开 nr EDD 喇 周 294 人 正在 抢 > 立即 热狗 > 
 ， 
9 
泽 夜 便利 店 品质 联 届 便民 菜市 
CG 加 喇 饭 
Le Um ,| 
优酷 饿 了 人 么 


例如 ， 优 酷 底 部 标签 栏 的 图 标 和 钱 了 么 中 国 分 类 入 口 的 图 标 都 有 所 改变 。 这 融 是 环境 贴切 原则 
的 体现 。 在 特殊 的 时 | 旧 里 ， 我 们 也 可 以 通过 改变 界面 的 皮肤 增加 产品 与 当下 环境 的 贴切 性 。 
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上 面 是 关于 环境 贴切 原则 的 案例 。 我 们 在 设计 界面 时 ， 必 须知 道 产 品 的 使 用 人 群 、 产 品 的 
类 型 ， 例 如 商务 类 产品 和 娱乐 类 产品 设计 出 来 就 会 截然 不 同 ， 这 是 产品 风格 的 环境 贴切 。 
除了 产品 大 方 同 要 贴切 ， 我 们 也 可 通过 一 些 特 殊 的 节日 改变 产品 的 皮肤 ， 让 用 户 在 短 时 间 
内 加 强 和 产品 的 共鸣 。 


3. 撤销 重 做 原则 
给 用 户 更 多 自主 操作 权 ， 当 用 户 在 使 用 产品 过 程 中 产生 错误 的 操作 时 ， 应 提供 更 多 的 解决 
方案 ， 例 如 撤销 或 重 做 等 功能 。 


案例 
微 信 中 我 们 需要 考虑 到 用 户 的 出 错 情况 ， 例 如 在 用 微 信 拍照 时 ， 有 如 下 功能 : 


如 果 效 果 不 够 理想 就 可 选择 左 侧 的 撤销 按钮 ， 在 未 发 送 情况 下 进行 重新 拍照 ， 另外 一 种 情 
况 就 是 发 送 后 也 可 以 通过 长 按 当前 发 送 的 图 片 ， 在 出 现 的 功能 菜单 中 选择 撤回 。 


上 面 是 撤回 重 做 原则 的 案例 ， 我 们 在 做 界面 时 要 根据 产品 的 不 同 阶段 ， 给 用 户 添 加 该 功能 ， 
如 果 是 一 次 性 考试 类 型 的 产品 就 不 适合 加 入 该 功能 ， 需 要 用 户 填 写 时 更 加 小 心 谨慎 。 


微 信 


4. 一 致 性 原则 


产品 的 功能 操作 、 模 块 样式 、 页 面 布 局 、 信 息 提 示 、 颜 色 运 用 应 该 一 致 ， 避 免 用 户 突然 跳 
转 后 感觉 在 使 用 男 一 个 产品 的 错 党 ， 影 响 用 尸 对 产品 的 整体 体验 。 
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案例 一 


便 鱼 记 账 中 ， 从 产品 的 lo0go 到 闪 屏 界面 再 到 里 面 的 主页 界面 、 图 标 、 按 钮 等 颜色 都 用 的 是 
统一 的 黄色 作为 主 色 ， 加 深 用 户 对 品牌 色 的 记忆 ， 如 下 图 所 示 : 


案例 二 


产品 或 者 系统 内 部 的 交互 方式 应 该 一 致 ， 这 会 让 用 户 对 产品 产生 信任 感 和 控制 感 。 例 如 ， 
下 图 中 的 微 信 会 遵循 不 同系 统 中 的 交互 方式 ，iOS 系 统 中 删除 列表 的 交互 方式 是 向 左 背 
动 ， 而 在 Android 系 统 中 则 是 长 按 需 要 删除 的 列表 。 这 就 是 遵循 已 有 的 系统 交互 方式 ， 保 


证 交互 的 一 致 性 。 


宁国 扎 信 39Mis 站 伟 会 4 串 165% Pw) 半 讼 1220 


微 信 (426) 
国王 
呈 ” 微 信 运 动 
标 为 已 读 
羞 顶 公众 号 
取消 关注 


铀 除 该 聊天 


mm Am 
和 Pi 
Gk Cd 

tt 
西 了 要 事 


淮 值 


iOS 端 微 信 


用 中 国 移动 他 上 午 12:41 号 可 看) 


微 信 (1) 中 


搜索 


@ 4 和 @ 人 


两 入 


Android 端 微 信 
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一 致 性 原则 除了 上 面 说 的 还 有 语言 的 统一 、 功 能 的 统一 等 。 对 于 设计 师 来 说 ， 设 计 上 的 统 
一 是 必须 要 注意 的 ， 但 是 我 们 往往 在 追求 视觉 效果 的 时 候 却 忽略 了 这 些 细节 的 问题 。 


5. 防 馈 原 则 

比 出 现 错误 信息 才 提 示 更 好 的 ， 是 通过 更 用 心 的 设计 来 防止 这 类 问题 发 生 。 在 用 户 选 择 动 
作 发 生 之 前 ， 就 要 防止 用 户 混淆 或 者 错误 选择 。 对 产品 进行 不 同 的 操作 、 重 组 或 特别 安 
排 ， 防 止 用 户 出 错 。 


案例 

如 下 图 马蜂 褒 的 选择 日 期 功能 ， 为 了 防止 用 户 选 择 错 误 ， 把 当天 日 期 之 前 的 日 期 都 设 定 为 
不 可 选择 。 再 例如 很 多 表单 页 ， 当 内 容 信息 未 填写 完 时 ， 按 钮 为 灰色 不 可 点 击 的 样式 ， 避 
免 用 尸 在 未 填写 完 之 前 就 点 击 提交 按钮 。 


seeee 中 国粹 动 全 上 午 12:46 7 了 六 
X 全 请 选择 入 住 及 退 房 日 期 
每 间 房 住 2 成 人 
入 住 12 月 28 日 0 蜡 高 店 “< 
的 一 se 三 [1 五 
2018 年 12 月 


L 13 


30 31 


2019 年 1 月 

1 2 3 4 5 3 四 
人 , 

马蜂 离 阿里 巴巴 


6. 易 取 原则 

尽量 减少 用 户 对 操作 目标 的 记忆 和 负荷， 动作 和 选项 都 应 该 是 可 见 的 。 用 户 不 必 记 住 一 个 页 
面 到 另 一 个 页 面 的 信息 ， 系 统 的 使 用 说 明 应 该 是 可 见 的 或 者 是 容易 获取 的 。 

案例 

为 了 让 大 家 更 好 地 理解 什么 是 易 取 原 则 ， 我 对 京东 的 弹 窗 界面 做 了 些 调整 ， 如 下 图 所 示 : 
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超市 恒利 新 鲜果 医 。 “ 烧 售 鼻 料 。  ” 周 花 斥 植 。 “医药 健康 


了 n= 于 > G 
“发 现 新 版 本 进 店 有 礼 VP 会 员 跑 转 代 丑 分 享有 礼 
大 绽 商 起 专 声 


全 场 免 运 


立即 把 物 > 


I 
2、 人 下 不 花园 枉 钱 ~ 
3、 购 物 车 次 单 用 券 ， 方 便 

4、 下 弟 地 址 优化 ， 再 也 不 会 送 错 地 址 
足 ~ 


5、 晨 算 页 开通 商家 会 员 ， 能 省 一 点 是 
一 点 - 


更 新 请 到 App Store 进 行 操 作 


确定 
| i 


平价 生 鲜 。” ”全 时 便利 
全 场 85 扩 全 场 免 运 满 29 尸 5 全 时 免 运 日 


"~\ - = P| 


京东 到 家 


京东 到 家 发 现 新 版 本 后 会 弹 窗 提 示 ， EE Store 进 行 操作 更 
新 ， 点 击 人 确定 后 如 果 返 回首 页 ， 导致 用 己 宦 需要 记 住 路 径 和 方法 ， 然 LA 后 再 去 操作 ， 流程 复杂 
的 话 ， 用 户 需 要 反复 切换 且 确 认 。 


正确 的 做 法 是 ， 当 选择 确定 后 会 自己 跳 到 App Store 的 更 新 界面 ， 用 户 只 要 点 击 更 新 即 
可 ， 不 需要 记录 整个 过 程 。 当 更 新 完成 后 ，App Store 中 的 更 新 按钮 变 成 打开 按钮 ， 可 以 
直接 打开 京东 到 家 的 首页 ， 这 个 流程 不 需要 用 户 提 取 任 何 记 忆 。 


.e000 AIRT 全 9'23 PM 100% mw 
€ Today 


京东 到 家 - 生 鲜 水 果 
超市 药店 1 小 时 到 家 


六 殉 季 © 
小 .日 真 真 真 真 侦 #17 17+ 
“发 现 新 版 本 


新 功能 版 本 历史 记录 


4 悦 前 


1、 首 页 /频道 页 : 搜索 更 便捷 ， 找 商品 


盛夏 将 过 ! 开启 贴 秋 夺 模式 ， 京 东 到 紊 超 信 特 惠 


更 
2、 丙 家 门店 促销 更 清晰 ， 不 花园 枉 钱 - i 
3” 购 物 车 凑 单 用 券 ， 方 重 - 等 你 来 拿 
4 ”下 单 地 址 优化 ， 再 也 不 会 送 错 地址 1、 增 加 了 获取 更 多 鲜 豆 的 任务 模块 更 多 
呈 ~ 
5、 结 算 页 开通 商家 会 员 ， 和 能 省 一 点 是 
a 预览 
更 新 请 到 App Store 进 行 择 作 
辑 二 
Today 


京东 到 家 
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7. 灵活 高 效 原则 
产品 中 中 级 用 户 的 数量 远 高 于 初级 和 高 级 用 户 数 量 。 要 为 大 多 数 用 户 设计 ， 不 要 低估 ， 也 
不 可 轻视 ， 保 持 灵活 高 效 。 


说 明 

这 个 原则 就 是 告诉 我 们 每 个 产品 针对 的 用 尸 不 可 能 是 所 有 群体 ， 都 会 有 自己 的 适用 人 群 ， 
我 们 需要 针对 主要 的 用 户 去 设计 ， 而 不 能 仅仅 为 了 一 小 部 分 用 户 进行 极端 设计 ， 满 足 大 部 
分 用 户 的 使 用 需求 才 是 最 重要 的 。 


8. 易 扫 原 则 
互联 网 用 户 浏览 的 动作 不 是 读 ， 不 是 看 ， 而 是 扫 。 易 扫 意 味 着 突出 重点 ， 弱 化 和 押 除 无 关 


信息 。 


案例 

很 多 设计 师 对 于 纯 文 字 的 界面 总 是 不 屑 一 顾 ， 感 各 没有 什么 难度 ， 也 不 需要 什么 设计 。 那 
么 我 企 左 侧 放 置 了 一 篇 无 设计 的 只 是 文字 排列 的 一 个 界面 ， 右 侧 则 是 网 易 新 闻 的 设计 界 
面 ， 如 下 图 所 示 : 


see09 中 国 移动 全 下 午 10:28 了 于 大 大) eee00 中 国税 动 令 下 午 10;28 1 Wm 
< 0 跟 巾 《 0 女 巾 
86 平 方 米 的 简 美 风格 小 户型 设 86 平 方 米 的 简 美 风格 小 户型 设 
计 ， 格 局 不 好 就 只 能 靠 装 修 来 计 ， 格 局 不 好 就 只 能 靠 装修 来 
改善 了 改善 了 
从 是 了 中 你 襄 训 
这 套 小 户型 的 面积 仅 有 86 平 方 米 , 小 两 居 位 sm 


的 格局 是 因为 户型 本 身 的 规划 不 好 ， 公 共 
区 域 大 ， 而 卧室 就 比较 小 ,但 是 格局 不 能 
改 , 就 只 能 从 装修 设计 这 方面 来 改善 这 个 
问题 。 公 共 区 域 的 空间 估计 有 35 平 米 左 
右 ， 所 以 只 能 是 把 客厅 和 餐厅 整合 在 公共 


这 套 小 户型 的 面积 仅 有 86 平 方 米 , 小 两 居 
的 格局 是 因为 户型 本 身 的 规划 不 好 ， 公 共 
区 域 大 ， 而 卧室 就 比较 小 , 但 是 格局 不 能 
改 ， 就 只 能 从 装修 设计 这 方面 来 改善 这 个 
问题 。 公共 区 域 的 空间 估计 有 35 平 米 左 


区 域 这 块 。 
右 , 所 以 只 能 是 把 客厅 和 餐厅 禾 合 在 公共 

整体 混搭 风格 的 改造 ,装修 后 的 效果 非常 ee ~ 
区 域 这 块 。 

的 实用 , 而 且 颜 值 高 
整体 混搭 风格 的 改造 ,装修 后 的 效果 非常 
的 实用 ， 而且 颜 值 高 

抢 沙 发 加 家 @ see 抢 沙 发 加 个 C7 68 


网 易 新 闻 
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可 以 明显 看 出 ， 左 侧 的 界面 找 不 到 重点 内 容 和 标题 ， 没 有 主 次 。 而 右 侧 的 界面 通过 文字 变 
化 、 段 与 段 的 间距 等 设计 手段 让 用 户 在 读 文 时 可 以 很 容易 地 扫 视 通 篇 的 主要 内 容 。 


9. 容错 原则 


帮助 用 户 从 错误 中 恢复 ， 将 损失 降 到 最 低 。 如 果 无 法 目 动 挽 回 ， 则 提供 详尽 的 说 明文 字 和 
指导 方向 ， 而 非 代 码 如 404 等 。 


案例 


为 了 避免 造成 用 户 的 损失 ， 我 们 需要 在 重要 操作 中 给 出 合理 的 文字 说 明和 指导 ， 如 下 图 
所 示 : 


王 除 备忘录 
文件 删除 后 将 无 法 恢复 删除 备忘录 会 将 其 移 到 "最 近 蓟 除 " 文 件 
夹 。30 天 后 将 永久 删除 。 


好 


有 道 云 笔记 备 扎 录 


例如 有 道 云 笔记 中 告诉 用 户 “ 文 件 删除 后 将 无 法 恢复 ”， 就 给 用 户 一 次 思考 的 时 间 ， 
避免 一 时 误 删 ， 造 成 损失 。iPhone 自 带 的 备 筷 录 给 用 户 的 容错 空间 更 大 ， 删 除 后 可 以 
在 30 天 内 找 回 。 另 外 ， 对 于 容错 程度 的 大 小 还 是 取决 于 产品 用 户 群 的 需要 ， 并 不 是 越 
大 越 好 。 


10. 人 性 化 帮助 原则 
帮助 性 提示 最 好 的 方式 是 : @ 无 需 提示 ; @ 一 次 性 提示 ; @ 常 驻 提示 ; @ 帮 助 文档 。 
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案例 

对 于 初次 使 用 产品 的 用 户 来 说 ， 可 能 不 知道 表单 里 面 需要 填写 什么 ， 如 果 没 有 帮助 性 文档 
的 提示 ， 很 容易 出 现 错 误 。 因 此 我 们 可 以 增加 一 些 填 写 前 的 文档 帮助 ， 例 如 每 日 优 鲜 ， 如 
下 图 所 示 : 


eee*o 中 国 移动 全 上 午 8:22 7 书 seeec 中 国 禄 动 全 下 午 2:40 
< 新 增收 货 地 址 附近 ”两 城 ” 微 课堂 
收 货 人 
瑟 
通讯 好 
手机 号 码 9 送 册 联系 你 的 电 识 
所 在 城市 % 择 移 所 在 的 城 和 名 功 售 
收 货 地 址 区 /写字 梯 ， a 上 新 医 习 运动 商务 蓝牙 
耳机 
楼 号 门牌 “楼 号 局 5 Me ¥ 39 [gi] 
原价 : YE9 


地 址 类 型 。 [本 [后 


= “点 击 但 看 商品 详情 


wm vs -> 
刘 j) 遍 了 


每 日 优 鲜 悦动 


在 刚 下 载 一 款 产 品 时 ， 最 好 提供 帮助 界面 ， 让 用 户 人 在 最 短 的 时 间 内 了 解 产品 的 主要 功能 
用 法 ， 如 悦动 的 截图 。 


如 果 人 在 使 用 产品 时 存在 一 些 使 用 户 困 惑 的 敏感 信息 时 ， 我 们 需要 对 其 进行 提醒 说 明 ， 甚 至 
要 做 出 教学 类 的 界面 进行 辅助 。 


男 重 点 
原则 1: 状态 可 见 性 原则 ， 用 户 人 在 手机 上 的 任何 操作 ， 如 上 下 滑动 刷新 、 上 点 击 跳 转 页 面 等 
都 应 该 即时 给 出 反馈 。“ 即 时 ”是 指 页 面 响应 时 间 小 于 用 户 能 忍受 的 等 待 时 间 。 


原则 2: 环境 贴切 原则 ， 简 单 地 说 就 是 产品 设计 符合 真实 世界 中 用 户 的 使 用 习惯 和 思考 多 
辑 ， 尽 可 能 贴近 用 户 所 在 的 环境 (年 龄 、 学 历 、 文 化 、 时 代 育 景 )， 而 不 要 使 用 生 俯 的 语 
言 ， 应 该 使 用 易 懂 和 约定 俗 成 的 表达 。 


原则 3: 撤销 重 做 原则 ， 给 用 户 更 多 目 主 操作 权 ， 当 用 户 芷 使 用 产品 过 程 中 产生 错误 的 操 


235 


236 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


作 时 ， 应 提供 更 多 的 解决 方案 ， 例 如 撤销 或 重 做 等 功能 。 


原则 4: 一 致 性 原则 ， 产 品 的 功能 操作 、 模 块 样式 、 页 面 布 局 、 信 息 提 示 、 颜 色 运 用 应 该 
一 致 ， 避 免 用 户 突 然 跳 转 后 感觉 在 使 用 另 一 个 产品 的 错 苋 ， 影 响 用 户 对 产品 的 整体 体验 。 

原则 5: 放 错 原则 ， 比 出 现 错 误 信息 才 提 示 更 好 的 ， 是 通过 更 用 心 的 设计 来 防止 这 类 问题 
发 生 。 在 用 户 选 择 动 作 发 生 之 前 ， 就 要 防止 用 户 混淆 或 者 错误 选择 。 对 产品 进行 不 同 的 操 
作 、 重 组 或 特别 安排 ， 防 止 用 户 出 错 。 

原则 6: 易 取 原则 ， 尽 量 减少 用 户 对 操作 目标 的 记忆 负 倚 ， 动 作 和 选项 都 应 该 是 可 见 的 。 
用 户 不 必 记 住 一 个 页 面 到 另 一 个 页 面 的 信息 ， 系 统 的 使 用 说 明 应 该 是 可 见 的 或 者 是 容易 获 
取 的 。 

原则 7: 灵活 高 效 原则 ， 中 级 用 户 的 数量 远 高 于 初级 和 高 级 用 户 数量 。 为 大 多 数 用 户 设 
计 ， 不 要 低估 ， 也 不 可 轻视 ， 保 持 灵 活 高 效 。 

原则 8: 易 扫 原则 ， 互 联网 用 户 浏 换 的 动作 不 是 读 ， 不 是 看 ， 而 是 扫 。 易 扫 和 意味 着 突出 重 
点 ， 弱 化 和 剔除 无 天 信息 。 


原则 9: 容错 原则 ， 帮 助 用 户 从 错误 中 恢复 ， 将 损失 降 到 最 低 。 如 果 无 法 自动 挽回 ， 则 提 
供 详 尽 的 说 明文 字 和 指导 方向 ， 而 非 代码 如 404 等 。 


原则 10: 人 性 化 帮助 原则 ， 帮 助 性 提示 最 好 的 方式 是 : (4) 无 需 提 示 ; @) 一 次 性 提示 ; 人 9) 常 
驻 提示 ; 4) 帮助 文档 。 


十 大 原则 很 容易 记 住 ， 但 我 们 的 目的 绝对 不 是 简单 地 记 住 它 ， 在 实际 设计 中 有 效 运 用 才 是 
天 键 。 无 论 是 产品 、 交 互 还 是 设计 ， 如 果 拿 捏 不 准 都 可 以 回想 一 下 这 十 个 原则 ， 也 许 会 有 
很 大 的 帮助 。 


参考 资料 
拿 不 定 设计 ? 让 经 典 的 尼尔森 十 大 可 用 性 原则 帮 你 ! http://t.cn/Efio7tQ 
用 超 多 案例 ， 带 你 全 面 看 懂 尼 尔 森 十 大 可 用 性 原则 ! ”http:/t.cm/RrlrQUB 


以 简 书 为 案例 讲述 | 尼尔森 十 大 可 用 性 原则 | http://t.cn/Rhdac07 
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07 拟人 形 法 则 


文 / 吴 萌 


拟人 形 法 则 指 的 是 把 事物 人 格 化 ， 赋 予 事物 和 和 人 一 样 的 特性 ， 和 人 一 样 有 感情 、 有 声音 、 
有 动作 。 拟 人 能 更 加 生动 地 表达 出 事物 的 特点 ， 让 人 感同身受 。 而 现在 拟人 在 设计 上 的 运 
用 也 日 益 广 泛 ， 把 抽象 的 、 用 户 不 熟悉 的 元 素 拟 人 化 ， 能 让 用 尸 第 一 眼 就 知道 你 这 个 产品 
是 什么 ， 引 起 他 们 的 关注 ， 从 而 建立 对 产品 的 情感 共鸣 。 


异 拟人 的 形态 


最 基础 的 拟人 化 就 是 模拟 人 的 外 在 形态 一 一 高 矮 胖 瘦 等 ， 把 自己 的 产品 和 人 的 外 在 形态 建 
立 联 系 。 在 产品 界面 中 ， 我 们 经 常会 用 拟人 化 的 卡通 形象 来 烘托 页 面 的 氛围 ， 胖 胖 圆 圆 的 
圆润 造型 可 以 营造 轻松 、 活 泼 的 联想 。 


2990 中 国 萝 动 4G 下 午 2:41 ,700% 


《 京东 小 金库 学 


A 
AN 了 
4 
| < 
<] 


摇 一 摇 赢 666 现 金 


你 已 完成 首次 体验 金 投资 


每 天 招 3 次 赢 现金 + 负 息 着 


和 


录 东 何 包 
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异 拟 人 的 动作 


肢体 语言 往往 比 外 在 形态 更 生动 ， 而 且 通 用 性 更 强 。 如 下 图 哗 哩 哗 哩 的 登录 页 ， 当 用 户 输 
入 密码 的 上 时候， 页 面 上 方 两 个 卡通 人 物 会 用 手 措 住 自己 的 眼 。 


” 覃 中 国 移动 邻 20:28 了 87% 
~ 登录 语 记 率 负 
= Re 
nl ww 一 
上 BNPN 
全 MG 。 
加 “请 的 入 虽 友 
哗 哩 哗 哩 


其 实 这 来 源 于 生活 中 的 场景 ， 当 你 在 银行 取款 输入 密码 的 时 候 自 己 会 用 手 挡住 ， 别 人 也 会 
自觉 回避 。 界 面 中 运用 到 这 一 点 ， 用 户 看 到 也 会 觉得 很 熟悉 ， 会 心 一 笑 ， 对 产品 的 好 感度 
瞬间 倍增 。 


异 拟 人 的 声音 


人 的 声音 和 动作 一 样 ， 都 能 在 短 时 上 间 内 引起 用 户 的 共鸣 。 在 产品 中 植 入 一 段 有 特点 的 音 
频 ， 也 是 一 个 不 错 的 选择 。 这 在 游戏 类 App 里 面 最 常见 ， 在 小 孩子 玩 的 益 智 类 游戏 中 也 
会 经 常 出 现 。 例 如 开心 消 消 乐 ， 错 误 的 时 候 配 合 着 抖动 会 友 出 “ 啊 哦 。 的 声音 ， 有 一 种 
避 异 的 意思 ， 误 励 用 户 再 接 再 厉 。 
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加 入 音频 后 会 让 反馈 信息 更 加 明确 ， 因 为 音频 本 身 就 囊 有 情感 ， 正 确 、 销 误 、 开 心 与 否 都 


开心 消 消 乐 


模拟 人 的 行为 


人 是 一 个 很 奇怪 的 物种 ， 大 多 数 人 都 认为 自己 做 一 个 决定 的 时 候 ， 是 完全 出 于 内 心 的 选 
择 ， 绝 对 不 会 受 他 人 影响 。 但 其 实 人 作为 一 个 社会 性 物种 ， 一 言 一 行 都 会 受到 周围 环境 以 
及 习惯 的 影响 。 


1. 行为 会 受 环境 的 影响 


1) 从 众 

社会 心理 学 里 讲 过 一 个 现象 : 从 众 心理 ， 指 的 是 个 人 的 行为 会 受到 外 界 人 群 行为 的 影响 ， 
从 而 在 目 己 的 知 营 、 判 断 、 认 识 上 表现 出 符合 公众 舆论 或 与 大 多 数 人 相似 的 行为 方式 。 从 
众 心理 是 部 分 个 体 普 所 所 有 的 心理 现象 。 


其 实在 很 多 产品 的 设计 上 ， 都 有 在 利用 用 户 的 从 众 心 理 。 例 如 把 产品 的 销量 、 评 价 数 外 漏 
展示 得 特别 明显 ， 仿 佛 在 告诉 用 户 我 这 个 乐 西 很 受 欢迎 ， 很 多 人 都 买 了 ， 好 评 也 很 局 ， 那 
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么 目 然 而 然 用 尸 束 会 对 这 个 产品 多 看 一 上 腿 ， 而 且 最 后 很 有 可 能 也 会 购买 。 回 想 自 己 在 淘 
至 购物 的 时 候 ， 是 不 是 总 会 选择 销量 最 高 、 好 评 最 多 的 商品 呢 ? 这 其 实 就 是 一 种 从 众 心 
理 一 一 大 家 都 买 的 应 该 差 不 到 哪里 去 。 


无 SIM 卡 倒 21:03 1*14% 忆 放 中 国 移动 令 15:25 TY 60%m, 
< 面膜 [9] Soe < > | 
全 部 “天 猫 ”店铺 。 淘宝 经 验 。 ” 挑 尖 货 宝 内 9 评价 详情 推荐 
RN 宝贝 评 价 (9693) 查看 全 部 > 
保温 滋润 (63) 实惠 (36) 正品 (25) 
匡 3 引 WIS 水 润 隐形 面膜 补水 保湿 起 
玻 去 黑头 收缩 毛孔 


已 经 第 二 次 回 购 了 ! 在 评价 面膜 还 算 不 错 的 呢 ..…. 


2 ) 攀比 


擎 比 也 会 激励 人 去 做 一 件 事情 。 各 种 App 里 都 会 有 排行 榜 ， 也 是 利用 用 户 的 这 一 心理 。 当 
看 到 自己 的 偶像 排名 较 低 时 ， 用 户 会 想 通 过 各 种 打 榜 活动 去 让 自己 的 偶像 排名 上 升 。 


无 SIM 卡 写 21:08 * 12%0 ) 


< 腾讯 视频 doki 星 炮 榜 


今日 奖励 排行 榜 
Nl 二 W 
. 0.00 

a 我 实时 周 榜 
» I 

© 50.00 

9 50.00 

和 且 50.00 

从、 

© eA 50.00 

多 No5 50.00 

全 办 


京东 金融 腾讯 视频 
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3 ) 奖励 

奖励 算是 影响 人 行为 的 最 快 的 一 种 方式 了 ， 新 手 注册 、 邀 请 好 友 、 每 日 俭 到 等 各 种 奖励 方 
式 ， 都 在 激励 用 户 。 奖 励 方式 按照 目的 可 划分 为 拉 新 和 留 仔 ， 不 同 的 目的 所 采取 的 奖励 方 
式 也 不 一 样 。 当 用 户 不 熟悉 你 的 产品 的 时 候 ， 通 用 奖励 是 一 种 很 好 的 方式 。 通 用 奖励 指 的 
是 你 所 奖励 的 东西 不 仅仅 局 限 在 你 的 平台 使 用 ， 而 最 常见 、 最 能 被 用 尸 接受 的 就 是 现金 
了 ， 这 也 是 拉 新 最 常用 的 一 种 万 式 。 


< 邀请 好 友 35 


遵 好 友 得 现金 


众人 助力 膨胀 人 越 多 越 大 
开 福 袋 就 给 钱 99 元 快 来 抢 


U2 80 , [19 » [U9 #w6i 


每 邀请 1 位 好 友 
YY 得 8 


好 友 
额外 6% 理 财 收益 特权 


邀 好 友 得 现金 多 邀 多 得 


各 忒 金 融 


2. 行为 会 受 习惯 的 影响 

俗话 说 三 天 能 养 成 一 个 习惯 ， 而 且 习惯 养 成 后 很 难 改变 ， 每 个 人 都 会 有 自己 的 一 点 小 癖 
好 。 一 个 吃素 的 人 ， 你 再 怎么 跟 他 宣传 肉食 多 么 好 吃 也 是 徒劳 无 功 ， 而 一 个 天 天 吃 肉 的 人 
让 他 改 吃 素 ， 别 人 也 轻易 接受 不 了 。 


时 说 每 个 人 的 习惯 各 有 不 同 ， 但 其 中 还 是 有 些 共 性 的 ， 例 如 按钮 、 卡 片 、 头 像 给 人 的 感 沉 
就 是 可 点 击 的 。 
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1 129% 无 SM 卡 今 21:17 * 1296 人 L_ 
己 游戏 美学 
出 ”神奇 动物 : 格林 德 沃 之 罪 冷 兵 器 的 魅力 


国 大 陆 上 蚁 


-| 2018-11-16 在 中 国 ; 
Bn Dp 
539 万 人 想 看 大 V 持 荐 度 61% 


ZL. 


95% 的 玩 众 认为 著 自 于 表 
如] 太太 太太 六 全 当当 当铺 


淘 票 村 评分 视 儿 效果 
和 想 看 支 看 过 
上 
简介 影评 讨论 更 多 
和 《 神 雪 动物 在 里 》 第 一 部 的 结尾 ， 纽 特 -斯 卡 今日 主题 
号 德 | 埃 迪 . 雷 德 梅 思 Eddie Redmayne 饰 ) 协助 作业 小 帮手 


美国 魔法 国会 ， 将 强大 的 黑 巫 师 盖 勒 特 ' 格 展开 


ss 
Today 3 ApPP La 弄 褒 


淘 票 票 App Store 


潭 


所 以 在 做 设计 的 时 候 ， 我 们 可 以 去 找 找 自 己 的 目标 人 群 有 没有 一 些 共 有 的 行为 习惯 ， 针 对 
这 个 共有 的 习惯 去 做 一 些 针对 性 的 设计 。 


拟人 形 法 则 并 不 仅仅 只 是 模拟 人 的 外 在 形态 、 动 作 、 语 言 等 ， 更 深层 次 的 是 模拟 人 的 情 
感 。 人 的 形态 、 动 作 、 语 言 能 够 影响 外 界 对 他 的 认 知 ， 例 如 看 到 全 身 都 是 妖魔 鬼怪 纹身 的 
人 会 不 由 自主 地 害怕 、 经 常 笑 的 人 会 给 人 面 善 的 感觉 、 同 一 句 话 用 不 同 的 语气 表达 意思 可 
以 截然 相反 ……… 


这 些 认 知 都 是 我 们 主观 上 所 认为 的 ， 拟 人 形 模拟 的 其 实 是 一 种 内 在 情感 ， 一 种 人 们 对 外 界 
的 主观 认 知 ， 是 人 对 现实 世界 的 看 法 ， 而 拟人 的 “人 ”只 是 起 到 一 个 媒介 作用 。 


异 拟人 的 情感 


我 们 这 个 时 代 的 人 在 精神 的 诉求 上 比 祖 非 高 太 多 了 ， 这 融 要 求 设 计 师 除了 满足 功能 需求 ， 
也 要 去 关注 人 们 的 情感 需求 。 人 性 化 的 设计 已 经 成 为 这 个 时 代 的 主流 ， 想 用 户 所 想 ， 为 他 
们 提供 他 们 想 要 的 服务 ， 或 者 说 让 我 们 想 推 的 服务 被 他 们 所 喜欢 。 


把 人 们 对 现实 世界 的 看 法 姨 接 到 产品 设计 上 ， 投 其 所 好 ， 就 能 让 目 己 的 产品 更 容易 被 大 众 
所 接受 。 这 里 说 的 “好 ” 指 的 是 认 知 习惯 ， 是 每 个 人 对 这 个 世界 存在 的 一 些 看 法 ， 有 客 
观 存 在 的 ， 也 有 主观 的 ， 而 且 这 个 看 法 也 会 随 着 时 间 的 变化 而 变化 。 
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1. 约定 俗 成 
有 一 些 认 知 习惯 ， 是 人 们 在 社会 中 上 自然而然 形成 的 。 如 红 橙 色 系 的 颜色 能 够 给 人 带 来 食 
欲 ， 因 为 生活 中 的 食物 大 多 都 是 这 个 色 系 的 ， 人 们 就 形成 了 固有 的 认 知 。 


当 我 们 在 实际 工作 中 运用 拟人 形 法 则 的 时 候 ， 要 干 万 注意 这 一 点 ， 不 要 盲目 去 做 跟 用 户 认 
知 相悖 的 设计 。 例 如 下 图 正确 错误 的 标识 ， 在 用 尸 的 认 知 层面 里 ， 正 确 是 绿色 的 ， 错 误 是 
红色 的 ， 所 以 在 做 设计 时 就 不 能 把 它 反 过 来 了 。 


而 把 用 户 固 有 的 认 知 习惯 和 产品 相 结 合 的 一 个 最 常用 、 最 快捷 的 方式 就 是 使 用 动物 形象 ， 
自然 界 中 绝 大 多 数 动 物 在 用 户 的 心里 都 有 固有 的 印象 ， 加 上 动物 大 多 和 我 们 人 一 样 ， 有 手 
有 脚 ， 也 更 好 延展 。 


例如 印象 笔记 的 大 象 ， 印 象 笔记 作为 一 款 多 功能 笔记 类 应 用 ， 对 用 户 来 说 最 重要 的 就 是 存 
储 功能 ， 所 有 记录 的 内 容 都 不 会 丢失 。 而 正好 大 象 属于 记忆 力 绝 佳 的 动物 ， 与 产品 想 要 传 
达 的 理念 完美 契合 。 


再 例如 美 团 外 卖 的 袋鼠 ， 袋 鼠 在 哺乳 动物 里 是 跑 得 最 快 的 ， 而 美 团 想 向 用 户 传递 “ 美 团 外 
卖 ， 送 啥 都 快 ”的 品牌 理念 ， 那 么 袋鼠 就 很 竺 合 这 一 理念 。 
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美 团 外 卖 


美 团 外 卖 送 险 都 快 


2. 现实 世界 

当 约 定 俗 成 的 习惯 无 法 与 自己 的 产品 结合 得 较 好 的 时 候 ， 我 们 也 可 以 从 现实 世界 中 找 灵 
感 ， 模 拟 现实 世界 的 场景 ， 让 用 户 对 界面 有 一 种 天 然 的 熟悉 感 。 

1 ) 引导 性 界面 

模拟 现实 世界 中 超市 、 图 书馆 、 机 场 等 地 的 指示 牌 。 


在 现实 世界 我 们 到 达 一 个 陌生 的 地 方 首先 会 去 看 的 就 
是 指示 信息 ， 每 一 层 有 什么 ， 要 去 的 地 方 在 哪里 。 


而 在 界面 中 也 是 一 样 ， 用 户 第 一 次 进入 ， 对 于 页 面 功 
能 的 放置 不 是 很 清楚 ， 这 就 需要 一 些 提 示 信 息 ， 特 别 
是 你 的 交互 比较 特殊 ， 用 户 还 没 章 成 习惯 时 。 


婚 内 惜 称 配 儒 双 方 签 字 才 算 共 同 便 务 ， 终 于 这 一 刻 
给 等 来 了 ! 幸亏 这 30 多 年 没 结 婚 [doge] 前 的 其 | 
物 504 


篇 Erindu 正在 爆竹 笠 


为 有 料 的 你 提供 的 上 培 专 区 


京东 金融 


亲人 二 
如 homai 


| 以 添 加 其 他 应 
ce a 乒 的 应 用 - 


支付 宝 
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2 ) 界面 与 用 户 互动 ， 即 时 给 予 反馈 

在 现实 世界 里 ， 我 们 和 别人 交谈 的 时 候 都 希望 是 一 问 一 答 式 的 ， 更 好 的 是 我 问 一 句 别 人 能 把 
我 想 知 道 的 都 告诉 我 。 而 在 App 中 ， 我 们 也 需要 营造 这 样 一 种 氛围 ， 在 用 户 进 行 一 个 操作 
的 上 时候， 即时 给 予 反 馈 。 例 如 支付 订单 的 上 时候， 即时 告诉 他 支付 的 结果 是 成 功 或 者 失败 。 


无 SIM 卡 二 15:51 上 * 9795 mi 


< 


查看 全 部 课程 》 
网 易 云 课 学 
在 他 做 下 一 步 操 作 的 时 候 ， 提 前 设想 他 可 能 要 做 的 事情 。 例 如 客服 中 心 页 面 ， 会 把 一 些 用 


户 常 问 的 问题 罗列 出 来 。 当 然 不 是 所 有 的 互动 都 要 是 一 本 正经 的 ， 适 当 的 时 候 来 点 不 一 样 
的 回馈 会 有 意外 惊喜 。 


旅行 贴 士 


何 时 可 以 操作 信用 卡 账单 分 期 


优 步 客服 联系 方式 人 
航班 发 生活 误 处 更 锁定 飞机 好 座位 
[® 花 喘 提前 结 清 机 延误 租 改 撒 度 在 域 选 座 司 人 一 沙 


花 响 申 请 分 期 后 可 以 一 次 还 清 吗 
下 ”如 何 取消 关联 认证 
实名 认证 
一 个 身份 证 可 以 认证 几 个 账户 


最 强 乘 机 指南 同行 单 友 互助 交流 
关 司 机 党 放飞 上 天 全 程 实时 贴心 互助 


UP! 我 的 客服 小 游戏 "i 
哟 跃 小 涝 戏 助力 城市 退 当 + 


出 行当 地 服务 


(从 
如 何 玩 转 支付 宝 人 @ 局 
陪 汗 人 和 运费 险 你 不 得 不 知道 的 事 首页 行程 客服 


携程 支付 宝 


245 


246 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


3 ) 空白 页 插画 、 走 心 文案 

人 是 群居 物种 ， 内 心 都 害怕 孤独 ，) 淘 望 上 有 人 人 关爱。 所 以 我 们 可 以 为 产品 里 那些 平淡 无 奇 的 
地 方 配 上 一 点 人 文 天 怀 ， 例 如 走 心 的 文案 、 可 爱 的 插画 ， 减 轻 用 户 的 烦躁 ， 让 用 户 能 够 感 
受到 亲切。 而 这 些 细节 能 够 成 为 产品 与 用 户 之 旧情 感 传 递 的 桥梁 ， 不 仅 能 够 增加 用 户 对 产 
品 的 好 感度 ， 还 可 以 让 产品 更 加 深入 人 心 。 


$1\ 


关注 列表 为 空 


EE 


运用 拟人 形 的 万 法 能 够 快速 引起 用 尸 的 注意 ， 建 立 积 极 、 正 面 的 互动 。 拟 人 形 不 仅仅 措 的 
是 模拟 人 的 外 形 、 动 作 、 语 言 ， 还 可 以 模拟 人 的 情感 ， 人 对 现实 世界 的 感受 。 在 遇 到 产品 
交互 难题 的 时 候 ， 可 以 从 生活 中 找 例子 ， 然 后 把 它 合 理 退 接 到 产品 设计 上 。 
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08 ”黄金 比例 


文 / 姜 正 


哲学 分 两 大 派系 : 街头 哲学 和 经 院 哲学 。 如 果 没 有 经 院 哲 学 ， 街 头 哲学 将 变 得 语无伦次 ; 
如 果 没 有 街头 哲学 ， 经 院 哲 学 将 变 得 无 天 紧要 。 设 计 理 论 和 实际 设计 的 天 系 也 是 如 此 ， 新 
手 设 计 师 总 是 对 设计 理论 推举 有 加 ， 认 为 优秀 的 设计 一 定 是 和 设计 理论 百 分 百 相 契 合 的 ， 
但 现实 和 理想 总 是 存在 一 定 差距 。 束 像 黄 金 比 例 一 样 ， 虽 然 黄金 比例 是 人 们 公认 的 最 佳 比 
例 数 值 ， 但 是 在 实际 应 用 中 则 显得 十 分 鸡肋 。 例 如 ， 我 们 平时 房屋 的 | ] 把 手 一 般 都 会 位 于 
居中 偏 下 的 位 置 ， 符 合 正常 身高 的 人 容易 触 碰 的 位 置 ， 假 设 按 照 黄 金 比例 计算 的 位 置 去 放 
置 ， 就 会 出 现 过 高 或 过 低 的 问题 ， 无 法 满足 用 尸 的 实际 需求 。 


黄金 比例 的 定义 及 常见 用 法 


1. 黄金 比例 的 定义 
我 们 可 以 将 黄金 比例 理解 为 人 类 视觉 最 舒适 的 比例 分 割 ， 公 式 为 ab~ 0.618。 


a b 
BB 


a/b=0.618 


2. 弟 见 用 法 

黄金 比例 在 平面 的 视觉 设计 中 被 广泛 应 用 ， 例 如 我 们 常 看 到 的 海报 设计 。 平 面 设 计 师 
往往 需要 借鉴 黄金 比例 来 确定 海报 的 版 式 骨 架 ， 以 及 各 元 素 的 摆 放 位 置 和 最 佳 视觉 消 
失 点 。 
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Ene KrRAOROINA 


图 片 来 源 于 Ads of the World 


黄金 比例 不 是 万 能 的 


黄金 比例 的 比例 数据 是 否 能 与 我 们 实际 的 设计 和 百 分 百 相 契合 ”我 们 通过 买 际 线 上 产品 的 
界面 设计 为 例 进行 比 对 分 析 ， 例 如 金刚 区 的 图 标 设计 以 及 页 面 在 整体 布局 设计 中 的 比例 
关系 。 


1. 图 标 设 计 
在 金刚 区 的 图 标 设计 上 ， 大 家 都 或 多 或 少 听 过 这 个 方法 : 用 外 轮廓 面积 乘 以 0.618 ， 得 出 
内 部 图 标 图 形 的 黄金 比例 面积 大 小 。 


这 种 方法 论 与 实际 设计 真 的 百 分 百 相 契合 吗 ?” 我 们 通过 已 经 画 好 的 比例 参考 线 对 京 乐 和 亚 
马 逊 的 金刚 区 的 图 标 设计 进 行 比 例 比 对 : 
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京东 亚马逊 


京东 和 亚马逊 的 金刚 区 图 标 设计 统一 在 2 倍率 下 进行 比例 比 对 ， 参 照 提 前 计算 好 的 比例 
圆 环 天 系 图 ， 可 以 明显 看 出 内 部 的 图 形 大 小 并 不 符合 预期 中 黄金 比例 关系 ， 内 部 的 图 
形 明 显 超出 或 者 小 于 黄金 比例 的 范围 值 ， 甚 至 在 亚马逊 的 金刚 区 中 底部 的 图 标 根 本 没 
有 按照 黄金 比例 关系 进行 设计 ， 所 以 黄金 比例 的 方法 论 并 不 能 百 分 百 适用 于 金刚 区 的 
图 标 设计 。 


2. 界面 版 式 设 计 


在 实际 的 产品 界面 版 式 设 计 中 ， 借 助 黄 金 比例 对 界面 进行 分 割 并 不 是 很 合适 。 或 许 大 家 在 
设计 概念 稿 的 时 候 会 借助 黄金 比例 对 界面 的 版 式 布 局 进行 分 割 ， 但 是 一 旦 落实 到 实际 的 业 
务 中 ， 它 们 的 关系 并 不 是 对 等 的 。 


0.618 


概念 分 割 实际 落地 


我 们 以 实际 落地 项 目 作 为 参考 依据 ， 统 一 在 2 倍率 下 与 已 计算 好 的 黄金 比例 分 割 线 进行 对 
比 。 这 里 我 们 以 支付 宝 的 首页 为 例 ， 在 不 同 功 能 数量 的 情况 下 ， 界 面 的 版 式 布局 都 没有 遵 
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循 黄金 比例 的 分 割 线 进行 排 布 。 


充值 中 心 


每 天 8.8 万 


芝麻 信用 


9 e 9 


蚂蚁 借 叹 花 咀 


和 外 “5 国 


© 
， 全 新 宝 
| »° 。 你 有 1 个 新 的 快递 信息 1 小 时 
! ， 5 。 余 晤 宝 收益 到 账 咏 30 天 前 多 
| 超 强 视 效 赶 超 阿 凡 达 
3 万 台电 脑 4.32 亿 小 时 制作 | 抢 要 > | 
' 0.618 
| ， 惠 支 付 


余额 宝 芝麻 信用 蚂 虹 借 员 花 员 
口 [4] 画 
充值 中 心 红包 生活 缴费 信用 卡 还 款 
城市 服务 蚂 下 森林 车 主 服 务 更 多 
» Oy 你 有 1 个 新 的 快递 信息 时间 网 

* 时 ” 。 永峰 裤 收 益 到 账 咬 30 天 育 


惠 支 付 


每 天 8.8 万 个 局 线 红包 升级 。 居 加 
ng 


再 以 今日 头条 、 网 易 新 闻 、 新 浪 新 闻 等 App 为 例 ， 我 们 发 现在 这 种 Feed 流 的 使 用 场景 
下 ，Feed 流 的 目的 是 不 断 给 用 户 提供 内 容 ， 在 设计 形式 上 会 以 平 铺 内 容 模块 为 主 ， 所 以 
黄金 比例 在 Feed 流 的 设计 当中 不 具备 实际 参考 意义 。 


a 刘 谨 回 应 夺 隐 换 栾 | 苹果 奈 电 太 快 怎 ， 国 


关 源 推荐 热点 北京 视频 国 风 三 
《 求 是 》 杂 志 发 表 习 近 平 总 书记 重要 文 
章 《加 强 党 对 全 面 依 法 治国 的 领导 》 


置 击 


习近平 时 间 | 建 设 美丽 乡村 让 农民 有 更 多 
幸福 感 


中 美 贸易 谈判 有 何 最 新 进 - 
展 ? 耿 更 : 耐心 稍 等 ， 答 > 
案 很 快 会 揭 误 


不 要 再 乱 买 跑步 机 了 ， 现 在 流行 折 委 型 
跑步 机 ， 才 9 块 9 


5 
I 


8 


今日 头条 


关注 ”头条 ? 视频 


娱乐 ” 仁 育 新 时 + 三 


习近平 : 加 强 党 对 全 面 依法 治国 的 领导 
里 顶 


建设 美丽 乡村 让 农民 有 更 多 幸福 感 
本 顶 


注 潢 今天 开 全 员 会 宣布 过 
冬 : 将 我 员 15% 涉 请 2000... 外 


AEAS 澳 洲 精英 中 学 交流 会 【3.2 北京 站 】 预 


女子 头 上 长 出 " 原 牛 人 朋 "被 折 
磨 一 年 医生 半 小 时 摘除 


约 活动 开启 
rn 正本 
第 八 届 
澳洲 精英 中 学 交流 会 | 
回 [9 可 2 


网 易 新 闻 


避 中国 1 月 pi 来 泛 材 六 
《 求 是 》 发 表 习 近 平 重要 文章 :加 强 党 对 全 面 
依法 治国 的 领导 

2 新 信 社 五 顶 


习近平 时 间 : 建设 美丽 乡村 让 农民 有 更 多 幸 
感 
所 华 六 是 估 
中 美 贸易 磋商 结束 闭幕 合影 ”一 ~ 一- 
新 腾 出 炉 ( 图 ) 上 1 


费 场 估 俩 神仙 省 侣 :这 些 中 国体 坛 佳话 你 知道 
吗 ? 


We 


喜讯 ! 北京 即将 举办 大 型 家 具 展 ， 门 村 
色 拆 全 了 
本 2 


寝 焕 镁 前 


新 瀛 新 闻 
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为 什么 黄金 比例 会 如 此 鸡肋 


在 金刚 区 图 标 和 页 面 版 式 布局 的 例子 中 黄金 比例 并 不 适用 ， 长 至 显得 很 鸡肋 。 出 现 这 种 状 
况 的 很 大 一 部 分 原因 是 我 们 忽略 了 实际 线 上 产品 的 “业务 属性 ”和 界面 设计 自身 的 “动态 
属性 。 


1. 业务 属性 

企 产 品 设 计 中 我 们 首先 要 考虑 的 融 是 它 的 业务 属性 ， 即 我 们 的 设计 是 否 能 够 满足 用 户 对 业 
务 的 需求 ! 其 次 是 考虑 设计 中 的 目的 性 ， 例 如 我 们 当前 的 业务 目标 是 提升 肤 核 心 模块 的 点 
击 率 ， 这 个 时 候 设 计 的 工作 是 更 好 地 5 引导 用 户 去 点 击 选择 该 模块 。 通 常 我 们 会 通过 多 种 方 
式 去 提高 该 模块 的 视觉 识 别 性 。 


回 到 实际 线 上 的 例子 当中 ， 这 里 以 京东 的 金刚 区 图 标 设 计 为 例 。 金 刚 区 的 首要 目标 是 为 其 
他 业务 进行 导 流 ， 所 以 为 了 提高 视觉 识别 性 会 将 图 标 做 得 尽量 大 一 些 ， 而 不 是 简单 地 遵循 
黄金 比例 的 设计 方法 论 。 


四 @E@BGO 


京东 超市 ” 京东 旅行 ” 京东 服饰 。 京东 生 鲜 。 京东 到 家 


四 有 和 四国 


充值 缴费 领 京 豆 领 闻 PLUS 会 员 


京东 


再 如 亚马逊 的 金刚 区 设计 ， 其 中 有 一 半 的 业务 是 海外 直 邮 ， 具 有 很 强 的 目的 性 ， 所 以 首要 
的 任务 是 突出 它 的 视觉 识别 性 。 亚 马 逊 这 里 直接 使 用 各 国 的 国旗 进行 图 形 的 遮 罩 处 理 ， 简 单 
直 白 ， 用 户 能 够 快速 识别 ， 节 省 了 认 知 成 本 。 假 设 使 用 黄金 比例 进行 换算 设计 ， 缩 小 关键 的 
图 形 设计 则 大 大 影响 图 标的 视觉 识别 性 ， 进 而 影响 业务 的 点 击 率 。 
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亚马逊 


2. 页 面 的 动态 属性 

页 面 并 非 一 成 不 变 ， 更 多 的 是 随 着 功能 增 减 友 生动 态 的 变化 。 例 如 一 些 产 品 会 为 用 户 提供 
更 多 选择 的 权限 ， 用 户 可 以 根据 自身 的 需求 将 自己 常用 的 功能 设置 在 首页 ， 随 着 功能 的 增 
减 整 个 功能 模块 的 高 度 也 会 发 生动 态 的 变化 。 


在 支付 宝 的 首页 功能 模块 中 ， 用 户 可 以 根据 自身 的 实际 需求 进行 编辑 ， 通 过 编辑 功能 图 标 
我 们 可 以 看 到 该 模块 的 高 度 尺寸 是 根据 用 户 需 求 进行 动态 变化 的 ， 并 非 是 一 个 固定 值 ， 所 
以 在 这 里 黄金 比例 的 借鉴 也 无 从 谈 起 。 


| | 四 [ESI 下 年 4:21 全 了 42% 面 人 
我 的 到 用 久久 mr 
@ ee © 9® 
6 9 已 = 余额 宝 艺 半 信和 记 。。。 坚 蛟 供 吸 花 呈 0 名 [a 
余额 宝 芭 麻 值 用 怒气 借 绚 由 一 口 © 剖 © [+) © = EE 芝麻 信和 用 CE 花 更 
充值 中 心 红包 生 盾 尼 费 信用卡 还 款 口 Ee 
。 你 有 1 个 新 的 快 通信 息 小 时 间 
总 。 余 格 宝 收益 到 帐 司 ”30 大 前 外 © [©] © 加 © 充值 中 心 杂 包 生活 牧 费 信用 卡 还 款 
城市 服务 。。 旺 蚊 森林 车 主 服务 外 匣 加 十 
主人 你 好 久 没 来 看 我 了 ， 城市 服务 。 ”她 玫 尊 林 ”车主 服务 更 多 
| 办 最 近 使 用 
* 。 你 有 1 个 新 的 快递 信息 1 时 表 
惠 支 付 Mao 中。 站? HH® .总 。 余额 宝 收益 到 账 胃 30 天 浊 
我 的 快 通 生 笑 号 大 麦 演出 本 哈 思 出 行 
每 天 8.8 万 8 赚钱 红包 升级 站 2 [+ [= 使 © 主人 你 好 久 没 来 看 我 了 
天 ?RE Em Sa 7 CLE me 
生活 服务 便民 生活 ”财富 管理 。 资金 往来 ”购物 娱乐 ” 教 惠 支 付 
= De = O° fe sxai5 © mrene 有 
全 @ 充值 中 心 。。” 销 用 卡 还 款 。 生 恬 而 费城 市 服务 (2 @ 
CE 乾 LE 二 了 


业务 较 少 业务 设置 业务 较 多 
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3. 交互 的 动态 属性 

页 面 也 并 非 是 静止 的 ， 它 需要 和 用 户 进行 实时 的 交互 ， 所 以 界面 中 的 各 个 元 素 是 不 断 变 化 
的 。 例 如 Feed 流 的 设计 ， 它 需要 不 断 地 为 用 户 展示 新 的 内 容 ， 具 有 很 强 的 交互 性 ， 需 要 
用 户 不 断 地 去 滑动 屏幕 下 拉 刷 新 ， 这 个 时 候 黄 金 比 例 并 不 能 为 整个 界面 设计 提供 很 好 的 版 
式 设 计 参 考 。 


.ll 让 :4 »- 


关 源 推荐 热点 北京 视频 国 风 三 


《 求 是 》 杂 志 发 表 习 近 平 总 书记 重要 文 
章 《 加 强 党 对 全 面 依 法 治国 的 领导 》 


习近平 时 间 | 建 设 美丽 乡村 让 农民 有 更 多 
幸福 感 


中 美 贸易 谈判 有 何 最 新 进 - 
展 ? 耿 爽 : 耐心 稍 等 ， 答 
案 很 快 会 揭晓 


不 要 再 乱 买 跑 步 机 了 ， 现 在 流行 折 稚 型 
跑步 机 ， 才 9 块 9 


关注 “头条 2 视频 晓 乐 体育 ”新 时 人 三 


习近平 : 加 强 党 对 全 面 依法 治国 的 领导 
置顶 


建设 美丽 乡村 让 农民 有 更 多 幸福 感 
置顶 


女子 头 上 长 出 "犀牛 角 " 被 折 
磨 一 年 医生 半 小 时 摘除 
滴 滴 今 天 开 全 员 会 宣布 过 1 


冬 : 将 裁员 15% 涉 逾 2000 
AEAS 澳 洲 精英 中 学 交流 会 【3.2 北 京 站 】 预 
约 活 动 开 启 


Q 中 国 1 月 cpi 来 沪 圳 浪 
《 求 是 》 发 表 习 近 平 重要 文章 :加 强 党 对 全 面 
依法 治国 的 领导 
2 新 卸 社 芷 基 
习近平 时 间 : 建设 美丽 乡村 让 农民 有 更 多 素 
感 
草 卉 


中 美 贸易 磁 商 结束 闭幕 合影 。meemv 
新 鲜 出 炉 ( 图 ) 


赛场 仿 便 神仙 着 侣 :这 些 中 国体 坛 佳话 你 知道 
吗 ? 


EE 
wd 


rT mens mae 
: / 第 八 届 
昌 ~ | 澳洲 精英 中 学 交流 会 | 喜讯 ! 北京 即将 举办 大 型 家 具 展 ,门票 ， 
2 REE “人 a gs 
今日 头条 网 易 新 闻 新 浪 新 闻 


在 我 们 常用 的 资讯 类 型 的 App 中 ， 大 多 数 都 采用 了 Feed 流 的 设计 ， 用 户 在 浏览 的 时 候 需 
要 不 断 地 下 拉 刷 新 内 容 ， 处 于 一 个 实时 交互 的 动态 场景 ， 黄 金 比例 的 版 式 布局 自然 也 没有 
什么 参考 价值 。 


4. 界面 的 适 配 


在 界面 的 适 配 中 ， 界 面 的 元 素 是 动态 的 。 在 适 配 中 我 们 需要 注意 两 个 主要 的 问题 : 倍率 和 
手机 分 辨 率 。 首 先是 倍率 的 占 题 ， 芷 不 同 倍 率 下 界面 适 配 内 容 的 高 度 尺 寸 会友 生 变化 ， 导 
致 界面 中 所 显示 的 内 容 也 有 所 不 同 。 例 如 支付 宝 首 页 在 iPhone 6 和 iPhone 6 Plus 上 显 
示 时 ， 分 别 是 2 倍率 和 3 倍率 ， 通 过 图 例 我 们 可 以 看 出 ， 在 3 倍率 下 的 内 容 会 比 2 倍率 下 的 
内 容 更 多 。 
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6 0 © 周 - 


余额 宝 芝麻 信用 蜗 蚊 惜 跑 


我 的 快递 
6@ 9 e© 相 9 Es EE 
余额 宝 芝麻 信用 妈 蚊 借 咒 我 的 快递 生活 号 花 咽 信用 卡 还 款 城市 服务 
只 3 Ee 引 口 可 
生活 号 花 映 。。 ”信用卡 还 款 城市 服务 充值 中 心 。 ”蚂蚁 琳 村 更 多 
口 名 二 
0) 。 你 有 支付 宝 积分 待 领取 30 分 钟 前 
人 本 * ， 惠 支付 碱 你 来 领 优惠 图 1 小 时 前 
1 -你 有 1 个 新 的 快递 信息 1 小 时 前 
。 余额 宝 收 益 到 账 啦 30 天 前 


惠 支付 
惠 支付 天 天 领 元 宝 注 赚钱 红包 升级 
edo i 


J 以 抵 钱 六 11 份 受信 到 于 
天 天 领 元 宝 。 .na 。 赠 钱 红包 升级 扣 国 


4 
首页 


多 0 
E33 Wy) SL 


iPhone 6 iPhone 6 Plus 
手机 的 分 辨 率 也 是 影响 界面 适 配 的 重要 因素 ， 人 在 同 倍率 下 ， 手 机 分 辨 高 的 界面 比 手 机 分 辩 
低 的 界面 显示 的 内 容 更 多 。 例 如 支付 宝 首页 在 同等 3 倍率 下 ， 


iPhone Xs 所 显示 的 内 容 明 
显要 比 iPhone 6 Plus 多 出 一 个 模块 。 


余额 定 艺 麻 信用 妈 蚊 俏 阅 我 的 快递 
只 [® Ee 外 
生活 号 花 顺 信用 卡 还 款 城市 服务 
© 0 二 ES 口 be a 
作 栅 王 芝麻 信用 高 者 伍 职 息 的 忌 志 充值 中 心 归 放 森林 更 多 
中 四 二 | 
ez ws 
村 本 
下 大 
充值 中 心 色 饮 总 村 出 
总 ， 公 有 支付 宝 辽 分 竺 领取 30 分 神 前 
， 惠 支 付 碱 你 来 领 优 惠 芝 1 小 时 前 
惠 支 付 
天 天 领 元 宝 注 赚钱 红包 升 圾 目 
惠 支付 生活 服务 
天 天 领 元 宝 小 呈 钱 红包 升级 | 各! 折 住 " 偷 电 县 ” 硬 -。 支付 宝 汇 生活、 关 
抵 钱 在 1 份 策 企 到 竹 » 
EE e 


四 - 


合 贡 


iPhone 6 iPhone XS 
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由 于 适 配 的 动态 变化 ， 同 一 个 界面 在 不 同 的 显示 倍率 和 手机 分 辨 率 下 ， 显 示 的 内 容 也 会 
根据 实际 的 适 配 情况 发 生 改 变 ， 面 对 动态 变化 的 适 配 设计 ， 黄 金 比例 显得 十 分 鸡肋 。 


男 重 点 


(1) 优秀 的 设计 可 能 并 不 能 与 设计 理论 百 分 百 相 契 合 ， 因 为 在 理论 知识 面前 ， 更 加 重要 
的 是 对 实际 业务 和 最 终 实 际 沙 地 的 分 析 。 


(2 ) 黄金 比例 在 实际 设计 中 显得 鸡肋 的 原因 主要 有 两 点 : 首先 是 忽略 了 产品 实际 的 业务 
目标 ， 产 品 始终 会 以 业务 为 主 ; 其 次 是 忽略 了 界面 自身 的 动态 属性 ， 其 中 导致 动态 属性 变 
化 的 因素 有 : 功能 的 自 定 义 变化 、 页 面 的 交互 动 效 、 界 面 适 配 情 况 。 
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01 为 什么 你 的 App 不 耐看 


文 / 吴 萌 


在 工作 中 经 常会 有 这 样 的 场景 ， 满 怀 欣 喜 地 做 完 一 个 界面 ， 怎 么 都 觉得 不 耐看 ， 但 又 不 知 
道 息 么 去 修改 。 例 如 下 面 这 两 个 界面 ， 整 体 没 什么 问题 ， 满 足 了 产品 的 功能 需求 ， 但 从 视 
党 上 来 看 不 够 精致 ， 图 标 、 配 色 、 投 影 都 存在 问题 。 


£8 我 不 是 潘 金 莲 76 


A [剧情 ) (下 到 9 工作 (4/5) 展开 \v 
ME 图 标 设计 、 切 图 、 标 注 等 
本 刚 范冰冰 界 济 购 票 | 本 
Wd F 
你 的 名 字 gb 
动画 ) (爱情 ) (《 到 侍 ) 昌 生活 (1/2) 
是 污 wu ， 是 晤 的 相通 下 班 买 菏 、 买 米 ， 做 几 个 好 了 吃 的 重 劳 自己 
白石 靖 闪 神木 隆之 介 预 售 丝 宣 里 的 花 按 
多 学 习 (2/3) 
a 神奇 动物 在 有 里 73 本 
至 少 做 一 个 UI 界面 十 
王政 i i 
NE 八 
当时 的 几 个 页 面 


光 说 哪里 有 问题 还 不 够 ， 我 们 需要 给 出 修改 意见 ， 而 且 这 些 意 见 要 可 量化 、 可 执行 ， 让 对 
方 看 完 就 知道 垮 么 去 修改 。 而 关于 这 些 我 也 整理 出 了 自己 的 一 些 心得 感悟 ， 大 致 分 为 图 
标 、 颜 色 、 角 度 、 分 割 方式 、 数 字 字 体 、 间 距 、 投 影 、 增 加 修饰 元 素 、 还 原 线 上 真实 场景 
等 几 个 方面 , 下 面 就 从 这 些 方面 来 具体 说 明 怎 么 让 界面 更 有 细节 ， 更 耐看 。 


图 标 


图 标 作为 一 个 界面 必 不 可 少 的 元 素 , 直接 影响 着 界面 给 人 的 第 一 感觉 。 一 个 “好 的 ” 图 标 
就 需要 保持 粗细 、 大 小 、 圆 角度 、 风 格 、 修 饰 元素 一 致 。 
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1. 粗细 、 大 小 


同一 模块 图 标的 大 小 、 粗 细 需 保持 一 致 , 例如 底部 标签 栏 。 芒 果 TV 底 部 的 五 个 图 标 都 是 
3px, 土豆 视频 的 五 个 图 标 都 是 2px, 粗细 一 样 , 大 小 在 视觉 上 统一 。 


加 国 图 加 国 © ® @ QH e 
精 选 直播 会 员 关注 我 推荐 排行 榜 发 现 订阅 我 的 
芒果 TV 描 边 3px 土豆 视频 描 边 2px 


2. 圆 角度 


同一 模块 图 标的 圆 角度 也 需要 一 样 ， 例 如 支付 宝 的 四 个 图 标 圆 角度 都 为 8px, 图 标 圆 角度 一 
f 会 让 图 标 更 加 统一 。 


3. 风格 
现在 图 标 风格 多 种 多 样 , 有 走 简洁 的 、 艳 丽 的 、 双 色 的 、 渐 变 的 、 断 线 风格 的 、2.5D 


的 …… 不 管 选择 哪 种 风格 , 我 们 需要 做 的 就 是 保持 整个 App 内 的 图 标 是 同样 的 风格 。 


OO 


中 Am 
S 四 的 问 
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口 


Vv 
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例如 傈 包 的 底部 图 标 来 用 偏 卡 通 、 硅 张 的 风格 ，App 内 部 的 图 标 也 和 底部 标签 保持 一 致 ; 
| 亲鱼 采用 的 是 黑色 和 黄色 的 双色 图 标 ，App 内 部 图 标 也 用 的 是 黄 黑 的 双色 图 标 , 这 样 界 面 
整体 就 很 统一 , 经 得 起 推 项 。 


三 川中 国 殉 动 党 10:17 本 地 55 


橙子 的 橙子 
虽然 没 挣 到 钱 ， 但 在 亲鱼 开心 就 好 


四 ”我 发 布 的 
侈 我 卖 出 的 0 
起 我 买 到 的 2 
会 我 收藏 的 1 
图 我 的 鱼 塘 4 
假 我 的 拍卖 
登 我 的 鱼 贝 0 
国 闲 鱼 Family 

“ee  @ Eg OA Db O & 

位 包 亲鱼 


4. 修饰 元 素 

修饰 图 标的 一 些小 元 素 要 保持 一 致 , 不 能 这 个 图 标 有 修饰 元 素 , 那个 图 标 没 有 , 也 不 能 用 不 
一 样 的 修饰 元 素 。 例 如 爱 奇 艺 的 底部 图 标 内 部 , 都 带 有 相同 样式 的 修饰 元 素 , 这 样 的 图 标 看 
起 来 就 像 是 精心 设计 的 , 而 不 是 纯 素材 堆砌 。 


人 


泡 泡 


这 里 面 需 要 特别 注意 一 点 ， 切 忌 不 经 过 思考 , 纯 套 用 素材 。 


直接 用 现成 的 素材 图 标 ， 粗 细 很 难保 持 一 致 , 界面 风格 也 会 不 统一 。 那 不 能 直接 用 网 上 的 
素材 , 自己 又 不 知道 怎么 画 的 时 候 , 应 该 怎么 办 呢 ? 这 个 时 候 我 们 可 以 先 定好 一 种 参考 风格 ， 
借鉴 素材 的 “ 形 ” ， 然后 改 成 自己 要 的 那 种 风格 , 其 他 界面 的 图 标 也 都 按照 这 个 标准 做 。 最 
后 把 所 有 图 标 放 在 一 起 , 对 样式 和 大 小 进行 微调 , 使 各 个 图 标 达 到 视 党 上 的 统一 。 
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© 一 申 人 
中 » 


参考 风格 参考 轮廓 成 品 


颜色 要 有 规律 可 循 


颜色 要 有 规律 可 循 指 的 就 是 要 定义 辅助 色 ， 且 辅助 色 不 要 太 多 。 这 样 重 复出 现 多 种 颜色 的 
时 候 ， 也 不 会 让 人 觉得 花哨 。 


mi 用 中 国电 入 46 11;52 7 0 100% mm 
频道 X 
藉 a © 
站 集 综艺 电影 ) 通 
€ 疤 © 
4 娱乐 资讯 水 育 辅助 色 
D 人 9 & 
直 满 来 源 大 鱼 号 L 行 榜 
© 人 & 
游戏 音乐 牛 
站 从 
志 实 和 财经 代 
©O E 是 
旅游 时 尚 亲子 生 
© 办 
优酷 


当 不 同 页 面 出 现时 ， 颜 色 也 更 加 统一 。 
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© OOOO0Q 


栎 务必 听 每 日 必 是 一 键 听 付费 精品 折 和 北京 


喜马拉雅 FM 


角度 统一 


角度 统一 包 合 渐变 以 及 投影 的 角度 ， 在 一 个 App 内 ， 使 用 的 渐变 以 及 投影 的 角度 需要 是 
一 样 的 。 


1. 渐变 
在 扁平 设计 流行 的 时 代 ， 越 来 越 多 的 人 喜欢 用 渐变 来 增加 页 面 质感 ， 但 使 用 渐变 的 时 候 需 
要 注意 ， 角 度 要 一 样 ， 如 下 图 淘宝 所 示 : 


*628 


韩 部 衣 滞 2018 乞 装 新 款 妆 续 峙 本 绎 
色 完 愉 中 长 车 还 幅 羽 城 稻 IG8161 修 
师 色 :M 

/ 加 天 汝 无 杖 网 


库存 染 张 
*638 


本 雇 二 说 | 通 219 元 , 享 刀 地 
oases re 


【 职 划 站 来 开间】 美 鹿 瑞 从 可 芝 丝 
盏 菩 对 列 水 愉 保 虹 补 水 面 腿 ” 国 面 
淘宝 头条 ”3 56G 良 费 基 本 上 已 经 确定 ， 人 人 孝 用 i s 
! 3 | 


尖 折 购 ED ON50 村 划算 息 月 23 日 00:00 开 国 后 可 


LE 
进口 笠 : 预 计 ¥90.88 


风 玖 20 件 
玉 夺 于 2 
© Ry > 皇 运 合计 -ED 
® 付 Bg 全 亿 563 昌 只 


淘宝 
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首页 头 部 用 的 是 从 左 到 右 零 度 的 线性 渐变 ， 购 物 车 页 面 的 头 部 以 及 结算 按钮 也 是 用 的 线性 
渐变 。 


橙 红 


除了 淘 罕 这 种 各 个 页 面 都 用 的 相同 颜色 的 渐变 ， 还 有 如 下 图 京 世 金融 的 不 同 颜色 的 渐变 。 


4 昌 中 国 移动 令 21:23 7 56%m ) 


京 喜 福利 社 器 全 民 欢 乐购 一 
天 天 令 现 会 抽 999 元 免 单 券 i 
码 付 优惠 券 包 秒杀 白条 优惠 
送 50 元 券 包 6.6 元 抢 20 元 券 包 1 元 抢 免 忠 券 


9 5 元 信用 卡 还 款 券 限量 抢 ! 
由 会 条 提 钱 来 喊 你 ! 10 元 话费 券 免费 送 ! 人 和... 


银行 专区 


广发 银行 银行 精 选 
周 五 满 80 减 40 生 陋 存 随 取 4.40% > 


小 白 卡 aa 商品 分 期 SI 
画 “ © 
克 付 
京东 金融 


这 个 时 候 的 角度 相同 ， 指 的 就 是 颜色 的 饱和 度 、 明 度 ， 即 都 是 一 个 角度 的 从 高 到 低 或 者 从 
低 到 高 。 


高 饱和 度 低 饱 和 度 


渐变 的 角度 是 大 家 很 容易 忽略 的 问题 ， 做 的 时 候 如 果 随 心 所 欲 ， 光 顾 着 单个 地 方 的 颜色 好 
看 ， 束 会 忽略 了 整体 ， 对 于 用 户 来 说 ， 他 们 看 到 的 整个 页 面 ， 是 所 有 元 素 搭 配 起 来 的 整体 
视 完 感受 。 
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2. 投影 
和 新 变 一 样 ， 不 同 地 方 的 同一 个 层级 的 元 素 ， 投 影 参 数 需要 一 臻 ， 例 如 下 图 过 钱 包 的 卡片 
的 投影 ， 理 财 页 面 和 购物 页 面 的 卡片 投影 是 一 样 的 。 


活期 T+0 要 键 收 冀 | 大 者 快 陆 | 尖 砚 免费 点 我 加 刀 


3.2040” voor] 
最 高 七 日 年 化 收益 间 se < 


OOgge 
喜 钱 包 


原则 上 来 说 ， 一 个 App 内 所 有 页 面 用 到 的 投影 都 必须 是 一 样 的 ， 但 是 难免 有 一 些 特殊 情 
况 ， 如 元 素 大 小 相差 较 大 上 时， 投影 参数 一 样 的 话 会 造成 视 党 上 的 不 一 样 。 


大 元 素 小 元 素 


当 过 到 这 种 情况 时 ， 我 们 就 要 学 会 变通 ， 例 如 把 小 元 素 的 投影 参数 调 小 一 点 ， 让 它 在 视觉 上 
和 大 元 素 保持 一 致 。 就 和 之 前 说 到 的 图 形 的 圆 角度 一 样 ， 小 元 素 的 圆 角 度 要 小 于 大 元 素 的 。 


圆 角 度 24px 圆 角 度 24px 


视觉 上 圆 角 度 不 统一 视觉 上 圆 角 度 统一 


分 割 方 式 


界面 分 割 的 作用 是 区 分 内 容 信息 , 而 为 了 在 区 分 内 容 的 同时 保持 整体 性 , 给 用 户 一 个 良好 的 视 
党 体验 , 我 们 需要 制定 统一 的 分 割 样式 ( 是 用 线 、 面 、 还 是 留 日 ) 以 及 它们 使 用 的 场景 。 
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1. 线 分 割 
线 分 割 有 两 种 样式 , 一 种 是 通栏 的 分 割 线 , 还 有 一 种 是 不 通栏 左右 留 间距 的 。 需 要 注意 的 
是 ， 分 割 线 的 色 值 不 能 过 大 , 不 然 会 导致 页 面 的 割裂 感 过 强 。 


精 选 春晚 爱 看 电视 剧 电影 综艺 三 深圳 影片、 影响 


局 小 伶 玩具 上川 儿 正在 热 遥 即将 上 映 排行 榜 


起 王 卡 专 享 往 利 ， 免 费 送 1 个 月 胸 讯 视频 VIP 


你 正在 追 的 > 


涡 员 的 以 生 王 于 对 王牌 第 3 学 


腾讯 视频 


2. 面 分 割 
面 分 割 中 色 值 同样 不 要 过 大 , 建议 面 分割 时 的 高 度 为 16px 或 20px (2 倍率 图 下 )。 


有 中 国 祖 动 46 13:58 要 丰 31 关 本 0 中 中 国 玩 动 党 13:29 合辑 玫 27% 医 )4 


站 本 有 WA 
男 态 军 居 食品 全 机 运动 答 到 


| We 
痢 年 括 配 胸 。” 病 in 驼 名 大 家 ”日系 小 可 震 车 烤 事 人 走 韩 壬 
-本 人 
QQ 和 只 Q 
1 EP 入 的 


蘑 茹 街 


3. 留 日 分 割 
用 留 白 来 区 分 模块 的 时 候 需要 注意 留 白 的 大 小 , 以 及 模块 的 层级 关系 。 
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答 冯 。 


购物 返 现 会 员 专 享 价 ”1 圳 \ 时 适 达 专属 红包 专 甩 


re ewe 


除 岁 迎春 风俗 记 


两 个 模块 之 间 的 间距 ( 图 中 榜 色 区 域 ) 要 比 模块 内 部 之 间 ( 图 中 紫色 区 域 ) 的 距离 大 ( 具 
体 可 查询 格式 塔 原理 ) 。 


4. 使 用 场景 


在 做 界面 时 , 定义 好 分 割 方式 之 后 , 还 需要 定义 它们 所 使 用 的 场景 。 以 腾讯 视频 为 例 ， 首 页 
大 模块 与 大 模块 之 间 采 用 的 是 线 分 割 , 那么 其 他 页 面相 同 模块 也 需要 用 线 分 割 |。 


由 下 中国 移动 写 14:16 要 忆 14% 


Vrs © 


sna, 您 好 | ER 
精 选 ”VIP 福利 社 电视 剧 ”电影 动漫 少儿 


个) 换 一 批 看 看 NA 假 后 开工 第 一 天 


# 酒 表情 包 表 达 忆 情 # 


过 大 年 ， 刷 大 片 ， 一 次 看 过 瘾 ! 


杀 破 狼 . 贪 狐 神奇 女 忌 -战斗 。1 赵 丽 蜂 6.1 如 一 天 
热门 话题 》 
间 假 后 开工 第 天 术 2018 为 爱 豆 许 个 愿 
这 部 电影 我 想 二 刷 ”可 看 更 多 话题 
闭 半 的 铁拳 拜年 # 


既 猫 传 :执着 


明星 驾到 > 


a ~ 三 m ~ 帮 
9 0 © ) A 0 © z 
首页 阴 点 cok 个 人 中 心 首页 热点 dcki 个 人 中 心 


腾讯 视频 -VIP 腾讯 视频 -doki 
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除了 上 述 所 说 的 模块 与 模块 之 间 的 分 割 方式 ， 还 需要 定义 模块 内 部 元 素 之 间 的 分 割 方式 。 
最 常 出 现 的 就 是 列表 页 ， 如 土豆 视频 中 “我 的 ”页 面 列表 用 的 是 留 日 。 


ool 中国 移动 合 14:37 了 哥 书 14%f 


栖 子 的 栖 子 Mandy 2 
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的 我 的 会 员 


名 热门 活动 


土豆 视频 -我 的 


收藏 、 缓 存 页 面 用 的 也 是 留 日 , 与 之 对 应 。 


mi 中国 移动 今 14:46 7 14%0 有 a 中 中国 移 动 令 14:47 站 14% 人 人 ) 
收藏 编辑 《 缓存 编辑 
胡 一 菲 让 唐 修 您 当 " 天 线 ”, 结果 作 死 皖 战 妈 开水 倒 在 防水 衣服 
上 我 会 感觉 有 多 泛 


收 到 朝鲜 语 频 道 , 太 带 了 ! 
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妆 孩 珊 耳 机 穿越 轨道 被 火车 撞 
倒 卷 入 车 底 奇迹 生还 


土豆 视频 -收藏 


数字 字体 


界面 字体 普遍 用 的 都 是 默认 字体 , 但 其 实 我 们 在 一 些 使 用 数字 的 地 方 , 可 以 目 定义 一 个 字 


体 , 这 点 在 金融 类 产品 里 尤为 明显 。 


加 火影 : 鸣 人 实力 单 挑 4 血迹 异 限 
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服务 中 几 | Se 


四 @ 灵活 出 异 
计 免费 领 500 元 06.0% see 
回 京东 小 金库 1.00 
7 日 年 化 4 60%* 0.00 器 定期 出 借 
日 cr 本 破 巷 检 训 10.0% 定 存 宝 (新 手 专 享 ) 
Due an 
章 文 名 75% 定 存 宝 rT3 月 期 J] 
目 保险 免费 依 z 
新 年 福 费 领 
9O0% 定 存 宝 “6 月 期 J 
oO 合 © 
首页 首页 全 库 发 现 瑟 的 
一 人 一 ra 台 
京东 金融 熊猫 金库 


这 种 类 型 的 App 里 面 很 多 都 跟 数 字 相 关 , 目 带 的 字体 没 办 法 很 好 地 展现 产品 的 特点 , 也 不 好 
和 别家 产品 区 分 。 如 下 图 所 示 , 10.0% 和 9.0% 是 定制 的 字体 , 7.5% 是 默认 的 字体 , 很 明显 
默认 的 字体 缺乏 自己 的 特点 , 而 定制 的 字体 这 有 圆 嘟 嘟 的 特性 , 也 和 界面 整体 风格 较 匹 配 。 


定 存 宝 (新 手 专 享 ) 


定 存 宝 13 月 期 


定 存 宝 16 月 期 


熊猫 金库 


除了 金融 类 的 产品 , 其 他 类 型 的 产品 也 可 以 定制 数字 字体 , 例如 价格 、 登 录 注册 时 的 数字 、 验 
证 码 等 , 特别 是 验证 码 发 送 后 的 倒计时 , 默认 的 字体 过 于 纤细 , 压 不 住 界面 。 这 时 候 我 们 可 以 
通过 定制 一 个 字体 , 使 它 与 其 他 元 素 区 分 开 ， 更 突出 、 更 明显 ， 从 而 提升 界面 的 视觉 品质 。 
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15818467812 15818467812 


72X2Y FDC 72X2Y FI 


2678 38S 2678 3695 


默认 字体 自 定 义 字体 


间距 


当 定 义 文字 | 间距 时 ， 如 果 直 接 用 文字 本 身 来 定义 ， 很 容易 出 现 偏差 ， 因 为 不 同 软件 中 不 同 
字体 的 行 高 都 是 不 一 样 的 。 


局 


Sketch PS 


其 次 ， 当 文字 和 图 标 组 合 出 现 的 时 候 ， 如 果 以 元 素 本 身 来 定义 上 下 间距 的 话 ， 间 距 会 因为 
元 素 本 身 大 小 的 不 同 而 不 一 样 ， 如 此 一 来 间距 就 没有 一 个 定 值 ， 没 有 定 值 就 意味 着 同一 个 
模块 | 介 距 有 好 几 种 ， 标 注 起 来 也 麻烦 ， 而 且 容 易 出 错 。 


16| 19 22 
日 


人 消息 
f )》 在 线 客服 


其 实 有 一 个 最 简单 的 方法 ， 就 是 用 cell 的 形式 ， 定 一 个 固定 的 高 度 ， 内 部 的 元 素 都 在 内 部 
居中 对 齐 。 这 样 就 不 需要 考虑 文字 和 图 标的 高 度 不 一 样 的 情况 了 。 


[=) 订单 > 。 


6 了】 在 线 客服 > 
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投影 未 和 


参考 真实 世界 的 情况 ， 物 体 的 投影 都 带 有 物体 本 身 的 颜色 。 所 以 在 制作 投影 的 时 候 , 可 以 
及 用 图 片 埃 加 的 方式 , 使 投影 更 加 通 透 、 立 体 ， 也 使 得 界面 更 有 细节 。 


图 片 车 加 投影 默认 投影 


从 上 图 可 以 明显 看 出 ， 左 边 的 图 片 更 有 细节 一 点 ， 不 只 是 简单 的 投影 。 那 么 具体 操作 方法 
是 什么 ?首先 将 图 片 复制 一 个 置 于 下 方 , 然后 缩小 一 点 , 高 斯 模糊 后 二 加 。 


图 片 坡 加 投影 默认 投影 
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看 到 这 里 , 可 能 束 有 人 会 说 这 样 的 效果 好 看 是 好 看 , 但 是 没 法 落地, 那 其 实 我 们 可 以 变通 一 
下 。 加 投影 的 目的 是 为 了 让 元 素 突 出 ， 让 元 素 突出 有 两 个 方法 , 一 个 是 元 素 本 身 突 出 ; 另 
外 一 个 是 周围 其 他 元 素 减 弱 。 


元 素 本 身 突出 周围 元 素 减 弱 


所 以 芷 实际 沙 地 的 时 候 , 我 们 可 以 只 加 默认 的 投影 , 但 是 去 挥 芳 边 两 个 元 素 的 投影 , 通过 减 
弱 周 围 元 素 , 起 到 突出 目 身 的 作用 。 


XXVIl=- 鹿 蛤 XXVIE 鹿 蛤 
ost f 4 让 芒 号 的 故事 


eoooo 


猜 你 喜欢 


op 


概念 稿 


车 
Et 


增加 修饰 元 到 


增加 修饰 元 素 就 是 给 页 面 增加 细节 ， 恰 到 好 处 的 细节 能 让 人 党 得 设计 者 是 花费 了 心思 在 里 
面 的 ， 而 不 是 随意 摆 放 。 


1. 卡片 


卡片 作为 一 种 包容 性 的 “容器 ”， 它 能 将 不 同 的 信息 很 好 地 集合 在 一 起 ， 而 且 卡 片 一 般 占 
用 面积 比较 大 ， 如 果 只 有 简 简 单单 的 一 个 背景 ， 很 容易 造成 页 面 很 空 ， 没 有 细节 。 所 以 融 
需要 给 它 添加 一 点 恰如其分 的 小 元 素 。 例 如 下 图 吼 里 啤 啦 人 在 卡片 上 加 了 卡通 形象 、 圆 点 等 
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修饰 ， 使 得 卡片 更 丰富 ， 更 有 细节 ; 自如 则 在 卡片 上 加 了 重力 感应 ， 倾 斜 手机 ， 小 元 素 会 
跟随 运动 ， 使 得 卡片 更 有 趣味 性 。 


无 SIM 证 富 17:34 下 10% 人) 少 无 SIM 卡 字 17:48 了 了 事 269%6 医 4 


橙子 北京 ”加 和 输入 小 区 / 商 围 /地 钱 站 等 四 | 
入 /学 习 成 就 es 转 


听 里 听 啦 自如 


例如 下 图 网 易 有 钱 的 银行 卡 就 加 入 了 logo 的 底 纹 ， 看 起 来 就 比 京东 金融 的 更 有 细节 。 其 
次 ， 京 东 金 融 的 银行 卡 信息 与 申办 小 白 卡 、 小 金 卡 相 比 ， 细 节 处 理 上 也 显得 更 弱 一 些 ， 申 
办 卡 的 背景 上 有 一 些小 的 修饰 元 素 ， 增 添 了 卡片 的 细节 成 分 。 


申办 小 白 卡 , 
4 下 打 和 白条 /360 元 支 何 立 减 券 /6 于 务 赴 


记 一 笔 May 9 


网 易 有 钱 京东 金融 


其 实说 来 说 去 就 是 这 些小 的 细节 点 ， 背 景 上 加 品牌 元 素 ， 或 者 加 一 些 没有 什么 实际 意义 的 修 
饰 元 素 。 说 起 来 很 容易 ， 做 的 时 候 希 要 特别 注意 分 寸 ， 不 要 太 过 了 ， 过 了 就 会 显得 人 花哨 。 
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2. 轮 播 点 
第 二 个 例子 是 最 常见 的 轮 播 点 ， 旨 在 介绍 方法 ， 希 望 大 家 能 举一反三 。 


说 到 轮 播 点 ， 大 家 脑海 中 最 先 想到 的 样式 衣 定 是 几 个 小 圆 点 ， 没 选中 的 是 灰色 的 ， 选 中 是 
日 色 的 ， 如 下 图 所 示 : 


无 SIM 卡 邻 10:12 $$ 53% 而 )+ 


电影 配乐 
大 师 艺 术 


淘 票 票 虾米 音乐 


这 样 的 方式 没什么 问题 ， 能 够 满足 产品 的 需求 。 但 是 我 们 可 不 可 以 在 现 有 的 基础 上 ， 再 进 
行 一 些 细节 处 理 呢 ? 例如 把 当前 的 选中 状态 做 得 更 明显 些 


小 川中 国 移动 令 


[ 锋 味 2] 林 依 最 献 陶 惨遭 谢 填 锋 “ 嫌 弃 " 


优酷 


再 例如 加 上 品牌 色 。 


方式 有 很 多 种 ， 只 要 能 够 满足 产品 功能 需求 ， 不 破坏 用 户 的 使 用 习惯 ， 纯 视 党 上 的 修改 都 
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可 以 滨 试 。 先 发 散 思 维 、 有 放飞 目 我 ， 然 后 骨 去 考虑 党 地 时 的 情况 。 


就 拿 轮 播 点 来 说 ， 它 的 主要 作用 是 提示 用 尸 当 前 选中 的 是 第 几 张 图 ， 以 及 一 共有 几 张 图 ， 
只 要 能 满足 这 些 功 能 就 好 ， 如 ENJOY 是 以 数字 轮 播 。 


中 中 中 国 移动 念 18:29 7 区 91% mm, 
ENJOYwasr Q 


今日 主推 4 


让 舌 口 克 忆 吉 
Dd 
ENJOY 
回 重点 
细节 决定 成 败 , 要 想 让 自己 做 的 界面 更 精致 、 更 耐看 、 更 有 细节 、 更 耐 推 项 , 就 需要 我 们 在 
设计 的 时 候 从 小 处 做 起 , 例如 文中 所 说 的 这 几 点 : 


(1) 图 标 粗 细 、 大 小 、 圆 角度 、 风 格 、 修 饰 小 元 素 保 持 一 致 
(2) 界面 内 所 使 用 的 辅助 色 要 有 规律 可 循 ， 可 通过 定义 辅助 色 来 实现 ; 
(3 ) 渐变 以 及 投影 的 角度 要 统一 ; 


(4 ) 页 面 分 割 方式 要 有 规则 可 循 , 规则 定好 之 后 , 其 他 界面 都 需要 遵循 该 规则 , 例如 模块 内 
部 的 列表 之 间 定 的 是 用 留 晶 , 那么 其 他 界面 相同 模块 都 需要 用 留 日 ; 


( 5) 数字 字体 可 定制 特殊 字体 , 和 其 他 内 容 做 一 个 区 分 , 提高 界面 的 视觉 品质 ; 
(6 ) 涉及 间距 的 时 候 ， 优 先 选 用 cell; 


(7 ) 在 设计 中 我 们 可 以 参考 现实 世界 的 投影 方式 , 在 图 片 下 方 区 加 一 层 高 斯 模糊 的 图 片 ， 
让 投影 更 通 透 、 更 自然 、 更 贴近 真实 环境 ; 


( 8 ) 尝试 在 界面 合适 的 位 置 增 加 恰到好处 的 细节 ， 例 如 在 卡片 背景 上 以 及 轮 播 点 上 ; 


(9 ) 作 图 的 时 候 ， 要 尽 可 能 地 还 原 线 上 真实 效果 ， 把 设计 稿 当 作 线 上 完成 稿 来 对 待 。 
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02 三 招 教 你 学 会 优化 信息 层级 


文 / 委 正 


息 层级 的 划分 是 我 们 日 常设 计 工作 中 最 容易 被 忽视 的 一 环 ， 优 秀 的 信息 层级 划分 能 够 准 
确 传达 信息 ， 而 信息 层级 划分 不 清 的 设计 往往 会 给 用 户 造 成 困扰 ， 不 能 满足 用 户 当 下 的 需 
求 ， 导 致 用 户 的 流失 。 接 下 来 我 们 一 起 看 一 下 如 何 快速 地 优化 信息 层级 。 


慌 理 信息 


为 了 能 够 有 效 地 划分 界面 中 的 信息 层级 ， 我 们 首先 要 做 的 就 是 梳理 信息 ， 对 页 面 内 的 信息 
先进 行 组 织 归 纳 ， 将 同类 信息 或 者 关联 性 强 的 信息 组 织 到 一 起 。 像 个 人 信息 页 面 中 ， 姓 名 
之 后 皮 跟 的 是 性 别 、 出 生年 月 日 等 诸如 此 类 的 信息 。 


罩 侦 信 wll 二 下 午 3:15 BB 了 9535 Ms 
< 我 的 资料 中 
上 传 头像 并 完善 个 人 信息 ， 即 可 获得 积分 ~ 


头像 BB 
个 人 主页 背景 开 
昵称 
性 别 


二 维 码 
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杀 密 性 原则 


当 对 页 面 内 的 信息 完成 梳理 之 后 ， 我 们 会 借鉴 亲密 性 原则 对 信息 进行 设计 。 亲 密 性 原则 是 
由 Robin Williams 在 《 写 给 大 家 看 的 设计 书 》 中 所 提 到 的 ， 其 中 亲密 性 原则 是 指 彼 此 相 
关 的 元 素 应 当 靠 近 ， 组 织 在 一 起 。 如 果 多 个 元 素 之 间 存 在 很 强 的 亲密 性 ， 它 们 就 会 成 为 一 
个 视 党 单元， 而 不 是 多 个 孤立 的 元 素 。 


A B 


杀 密 性 有 助 于 信息 的 统一 性 ， 符 合用 户 对 同类 信息 顺延 阅读 的 心智 模型 ， 减 少 了 视觉 混 
乱 ， 为 用 户 提供 一 个 人 逻辑 清晰 的 信息 结构 系统 。 


亲密 性 的 根本 目的 在 于 实现 “组 织 性 ”。 我 们 需要 将 相同 属性 的 信息 组 织 在 一 起 ， 为 页 面 
的 内 部 建立 起 一 个 恨 好 的 信息 浏览 秩序 ， 符 合用 户 的 阅读 习惯 ， 避 免 用 户 在 浏览 信息 的 时 
候 耗 费 过 多 的 精力 或 看 不 懂 。 这 里 我 们 以 淘 票 票 为 例 进 行 分 析 : 


四 搜索 ull 人 下 午 5:54 @ 了 465% 面 ] 
< 流浪 地 球 C2 
The Wandering Earth 
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通过 上 图 ， 我 们 可 以 看 出 淘 票 票 企 电影 的 简介 中 将 同属 性 的 信息 进行 有 序 组 织 ， 使 得 界面 
看 起 来 整齐 有 序 ， 并 符合 用 户 自 上 而 下 、 从 左 到 右 的 阅读 习惯 。 


对 比 原 则 


对 比 原则 的 核心 思想 是 避免 页 面 中 的 元 素 过 于 相似 ， 我 们 需要 通过 对 比 的 方法 让 页 面 上 重 
要 的 元 素 能 首先 引起 用 户 的 注意 ， 而 不 是 页 面 整 体 都 十 分 平庸 ， 让 用 户 感 觉 无 从 下 手 。 
( 引 自 Robin Williams 所 著 的 《 写 给 大 家 看 的 设计 书 》。) 


对 比 是 我 们 区 分 信息 层级 的 重要 手段 ， 通 过 加 强 元 素 之 间 的 对 比 来 区 分 信息 的 主 次 关 
系 。 在 处 理 信息 的 时 候 ， 我 们 通常 会 使 用 字 重 ( 粗细 ) 、 大 小 、 色 彩 、 字 体 四 个 维度 进 


行 对 比 。 
OO 
1. 字 重 对 比 


字 重 是 我 们 在 使 用 字体 时 经 常 考虑 的 一 个 变量 ， 通 过 字体 粗细 的 差异 对 比 来 区 分 信息 之 间 
的 主 次 关系 。 


在 设计 中 ， 我 们 要 尽量 选择 字 重 丰富 的 字体 ， 这 样 能 够 保证 视 党 的 统一 性 ， 不 会 出 现 
字形 差异 这 种 细节 性 的 错误 。 例 如 ，iOS 的 官方 字体 苹 方 字体 就 含有 丰富 的 字 重 ， 
Ultralight、Thin 、Light、Regular、Medium、Semibold 能 够 满足 我 们 日 常设 计 中 的 大 
部 分 需求 ， 如 下 图 所 示 : 


平方 1% 平方 ”平方 ” 鞋 方 ” 苇 方 


Thin Light Regular Medium Semibold 


通过 字 重 的 对 比 我 们 可 以 区 别 信息 的 优先 级 以 及 不 同 状态 。 例 如 我 们 常见 的 项 部 导航 栏 ， 
大 部 分 都 是 通过 字 重 的 对 比 来 区 别 选中 状态 和 未 选中 状态 ， 如 下 图 所 示 : 


Zi 
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图 搜索 oll 全 下 午 4:32 @ 了 100% En) 


Q 酒 摄影 设计 旅行 影 ? 六 


LOFTER 


LOFTER 顶部 导航 栏 中 ， 选 中 状态 的 字体 会 变 粗 ， 而 未 选中 的 字体 没有 变化 ， 用 户 可 以 
明显 区 分 选中 和 未 选中 状态 的 区 别 ， 以 及 当前 所 处 的 位 置 。 


2. 大 小 对 比 

大 小 对 比 是 最 直 日 的 方式 ， 面 积 大 小 的 对 比 肉眼 更 加 容易 分 辨 ， 对 比 效果 更 加 明显 。 因 为 
“大 ”的 文字 信息 更 具有 视觉 冲击 力 ， 更 容易 被 用 户 看 到 ， 信 息 等 级 自然 也 会 高 一 些 。 例 
如 ， 常 见 的 大 小 标题 的 对 比 或 者 标题 与 辅助 文案 的 对 比 ， 如 下 图 所 示 : 


河马 电影 


中 
对 
过 
HH 


上 图 标题 字体 明显 要 比 辅助 文案 字体 大 ， 信 息 层 级 明确 ， 用 户 第 一 眼 首 先 就 能 看 到 标题 名 
称 ， 其 次 才 是 辅助 文案 ， 这 样 符合 用 户 的 心智 模型 ， 不 会 给 用 户 造 成 困扰 。 


3. 色彩 对 比 


色彩 性 格 鲜明 ， 相 对 于 无 色相 的 黑 日 文字 更 加 出 彩 ， 巧 妙 使 用 色彩 可 以 更 好 地 优化 信息 
层级 。 
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色彩 的 优势 主要 有 两 点 : 首先 是 色相 鲜明 ， 视 党 冲击 力 较 强 ， 容 易 被 人 察觉 ; 其 次 ， 我 
们 可 以 利用 色彩 心理 学 传递 一 定 的 信息 ， 例 如 在 电 商 中 经 常用 红色 优惠 标签 显示 出 降价 
的 紧迫 感 。 


〇 哇 哦 视频 ED 全 每 日 好 店 


© 


全 部 直播 ”全球 生活 母 嗣 尺 
(0 网 I 推荐 进 D 好 全 。 享受 生活 也 轨 大 赏 时 i 


可、 Er " 


色彩 对 比 主要 有 两 种 处 理 方式 : 添加 文字 信息 颜色 和 在 文字 信息 后 面 添 加 背景 色 。 通 常 在 
运营 活动 中 ， 会 采用 将 标题 添加 色彩 的 方式 ， 用 以 凸显 运营 活动 的 重要 性 ， 并 能 够 将 标题 
与 底部 的 辅助 文案 明显 区 别 出 来 。 


忆 上 海 迪士尼 4 


起 全 特卖 


野 合 厅 国 机 票 自由 行 往 北京 宁 香港 往返 
返 7-8 天 


dh ke 


Y515 起 


飞 猪 


给 文字 信息 添加 背景 色 最 常见 的 使 用 场景 就 是 标签 。 标 签 在 日 常 使 用 中 发 挥 着 重要 的 
作用 ， 但 是 设计 面积 较 小 ， 通 过 色彩 能 够 很 好 地 凸显 自己 的 层级 ， 传 递 信息 。 
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最 强 长 日 出 3 日 游 : 
沉 你 探秘 
飞 猪 
4. 字体 对 比 


经 常 使 用 的 字体 大 致 可 分 为 无 裤 线 体 、 衬 线 体 和 手写 体 。 字 体 的 对 比 是 措 通 过 不 同类 型 的 
字体 进行 组 合 对 比 ， 利 用 不 同 字体 字形 之 间 的 差异 产生 一 定 的 视觉 有 反差， 来 区 分 信息 之 间 
的 主 次 关系 。 


例如 ， 淘 票 票 中 “ 阿 丽 塔 ”使 用 的 是 手写 体 ， 而 底部 的 辅助 文案 则 使 用 了 普通 的 黑体 ， 通 
过 两 种 不 同类 型 的 字体 对 比 ， 我 们 可 以 清晰 地 分 辨 出 信息 之 间 的 主 次 天 系 。 


钢 锅 流 


人 类 的 视觉 运 动 都 是 点 到 点 跳跃 式 扫描 而 非 平 滑 移 动 ，Google 早期 通过 眼 动 仪 观察 用 户 
在 浏览 界面 内 容 时 的 视觉 流 呈 F 形 ， 而 且 越 往 下 视觉 注意 力 越 少 ， 如 下 图 所 示 : 
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当 我 们 在 进行 信息 分 类 之 后 ， 可 借鉴 视觉 流 的 原则 ， 来 审视 上 自己 的 设计 是 否 符合 用 户 上 自 左 
到 右 、 自 上 到 下 的 阅读 习惯 。 


ul 中 国联 通 令 下 午 2:50 @ 了 89% Ei)'s 


《11 腾讯 新 闻 次 


缆 江 豚 泪 流 不 止 好 站 下 例 买 下 放生 


[晚报 ] 中 国 33 名 游客 在 秘鲁 酒店 
生动 持 大 使 馆 回应 
bh 岁 女 孩 遭 家 人 通婚 深夜 醉 倒 街 
酒 后 金 句 频 出 (现场 ) 
过 些 剧 情 是 这 样 拍 出 来 的 演员 的 


1 


男 重 点 


( 1 ) 优秀 的 信息 层级 设计 主 次 分 明 ， 能 够 准确 传递 设计 中 的 信息 ， 不 会 给 用 户 造成 困 
扰 ， 从 而 市 来 优秀 的 用 户 体 验 。 


( 2 ) 优化 信息 层级 的 用 户 体验 主要 有 三 步 : 首先 进行 信息 梳理 ， 将 同类 型 的 信息 进行 
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组 织 归 纳 ; 其 次 加 强 信息 之 间 的 对 比 ， 主 要 对 比方 式 有 有 字 重 对 比 、 大 小 对 比 、 色 彩 对 
比 、 字 体 对 比 ; 最 后 要 注意 信息 设计 符合 用 户 的 阅读 习惯 ， 即 自 上 而 下 、 从 左 到 右 的 
阅读 顺序 。 


由 


考 资 料 
三 步 优 化 界面 信息 层级 ， 让 用 户 找 准 重点 https://zhuanlan.zhihu.com/p/36648284 


主体 与 层级 关系 第 六 节 复 盘 一 一 文字 的 层级 关系 https://www.jianshu.com/p/ 
f3996be4c/er/ 
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03 ”四 步 教 你 所 升 表单 设计 的 用 
尸体 验 


文 / 魏 正 


优秀 设计 师 和 普通 设计 师 的 差异 就 是 在 于 对 细节 的 把 控 。 以 表单 设计 为 例 ， 大 家 可 能 觉得 
没什么 值得 深究 ， 但 一 个 优秀 的 表单 设计 能 够 帮助 产品 赢得 更 多 的 留存 ， 提 升 用 户 的 操作 
效率 ， 为 用 户 融 来 恨 好 的 感受 。 


表单 设计 的 目的 


表单 作为 最 常见 的 组 件 之 一 ， 肩 负 着 重要 的 作用 。 表 单 是 产品 与 用 户 对 话 的 主要 途径 之 
一 ， 通 过 填写 表单 ， 产 品 可 以 收集 到 用 户 数据 ， 并 且 用 户 可 以 通过 填写 表单 来 反馈 目 己 对 
产品 的 建议 。 最 常见 的 表单 有 调查 问卷 和 进入 App 时 的 兴趣 选择 ， 例 如 下 图 ， 用 户 通过 
填写 表单 完成 了 目 己 对 产品 的 反馈 。 


egg 中 国联 通 倒 下 午 10;04 攻 了 65% 


《 反馈 帮助 中 心 
好 站 务 中 心 民 意见 反馈 


如 何 举 报 ? 怎么 正确 使 用 举报 功能 ? 
如 何 更 换 绕 定 ? 如 何 解 绑 手 机 号 ? 
巡 到 讨 谤 /企业 侵权 内 容 ， 如 何 投诉 ? 
知 平 币 如 何 充 值 和 使 用 ? 


我 被 茜 言 了， 如 何 进行 申诉 ? 


人 @@ 投诉 举报 (规范 /举报 /申诉 等 ) 
人 四 账号 服务 ( 解 换 十 /帐号 安全 等 ) 


人 支付 服务 ( 知 平 币 / 余 鲍 提 现 等 ) 


知 平 


283 


284 


UI 那些 事 儿 : 新 手 设 计 师 的 成 长 之 路 


表单 设计 的 作用 


表单 设计 的 主要 作用 是 提高 用 尸 的 填写 效率 。 为 了 提高 用 户 的 填写 效率 ， 我 们 首先 要 做 到 
就 是 挽留 用 户 ， 让 用 户 愿 意 花 时 上 间 和 精力 去 填写 表单 ， 所 以 表单 设计 的 用 户 体 验 至 关 重 
要 。 接 下 来 我 们 看 一 下 通过 哪 几 步 能 够 有 效 提高 表单 的 用 户 体验 设计 。 


提升 表单 设计 的 4 个 关键 步骤 


1. 优化 信息 层级 
首先 我 们 需要 做 的 就 是 优化 信息 层级 ， 面 对 繁 乱 的 信息 ， 用 户 往往 会 不 知 所 措 ， 放 弃 当 前 
任务 的 操作 也 是 理所当然 的 事情 。 


对 于 优化 信息 层级 ， 首 先 要 做 的 就 是 对 信息 进行 分 类 ， 通 过 亲密 性 的 原则 将 相同 类 型 的 
信息 组 合 在 一 起 ， 这 样 做 符合 用 户 对 信息 理解 的 心智 模型 ， 信 息 归 类 后 填写 起 来 也 更 加 
方便 。 


[CE 下 午 10:39 S762% 
所 发 布 租赁 房 源 (北京 ) 0@ 
基础 信 ， 所 在 小 区 
头像 G 具体 地 址 
用 户 名 d5f247ebgd2 期 望 租金 有 拨 的 月 租 
收 货 地 址 称呼 何 称 | 


@ #il 

个 淘宝 未 纺 定 
像 支付 宝 未 密 定 
全 铀 博 未 岗 定 
A 山 信 林 瑞 宗 


饿 了 人 么 贝壳 公寓 
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优化 信息 层级 的 最 后 一 步 就 是 对 已 分 组 的 信息 进行 视觉 层级 的 处 理 ， 通 过 颜色 、 大 小 、 字 
体 等 视觉 手 段 来 区 分 它们 的 先后 关系 。 通 过 对 信息 层级 的 视 党 区 分 ， 能 够 有 效 地 告诉 用 户 
它们 之 间 前 后 的 逻辑 天 系 。 


il 中 国联 通 倒 下 午 2:08 @ 了 40% Gs 
取消 


塌 寞 
人 添加 电话 
人 激 加 电子 邮件 
电话 铃声 。 默认 


短 慷 铃声。 默认 


A 法 hn LIRI 


担 


iPhone 通讯 录 


2. 为 用 户 提供 便捷 的 操作 流程 


为 用 户 提 供 便捷 的 操作 流程 能 够 有 效 减少 用 户 所 耗费 的 时 间 和 精力 ， 投 入 少 收益 大 ， 用 户 
自然 不 会 抗拒 填写 表单 。 


优化 操作 流程 中 要 求 我 们 站 在 用 户 的 角度 上 去 思考 上 问题， 如何 为 用 尸 提 供 便捷 的 操作 ， 成 
为 提升 表单 用 户 体验 设计 的 重要 一 步 。 最 经 常 使 用 的 两 种 方法 就 是 “交互 减 步 长 ”和 “ 拆 
分 步骤 。 

1 ) 交互 减 步 长 

侍 页 面 中 减少 交互 路 径 ， 能 够 有 效 减少 用 户 的 操作 成 本 。 我 们 可 以 根据 用 户 操作 习惯 进行 


预 判 ， 将 一 些 重复 性 日 常 操作 行为 设计 成 “ 预 设 ”， 简 化 用 户 的 操作 行为 。 我 们 经 常 使 用 
的 充值 页 面 为 例 : 
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用 中 国联 通 全 下 午 2:24 全 758% 加 Dt 
C 手机 充值 我 的 
188 8888 8888 地 

30 元 ] 50 元 100 元 

竺 价 29.97 元 得 惟 4995 元 货 价 99.905 

200 元 300 元 500 元 

夫 199 80 元 人 和合 崔 299.70 元 和合 惟 499.50 元 
费 + 会 员 
景 高 立 减 20 元 

bo 更 多 流量 送 宽带 

] 也 量 特 革 四 1 年 免费 用 


手机 营业 厅 | 旧 手 机 换钱 | 话费 送 好 友 | 更 多 般 务 


微 信 充值 


在 充值 页 面 中 ， 将 原来 要 手动 录入 的 充值 金额 转换 成 点 击 卡 片 一 键 充值 的 形式 ， 用 户 不 需 
要 像 以 前 通过 “点 击 一 输入 金额 一 确定 一 充值 这 样 漫长 的 步骤 完成 充值 。 

2 ) 拆 分 步骤 

简短 的 交互 并 不 等 同 于 优秀 的 用 户 体验 ， 如 果 大 量 的 信息 出 现在 同一 个 页 面 内 ， 用 户 首先 遇 
到 的 难题 束 是 需要 辨别 大 量 信息 ， 其 次 就 是 企 一 个 界面 中 进行 直人 感 营 十 分 几 长 的 操作 。 
当面 对 信息 量 大 且 较 为 复杂 的 表单 设计 时 ， 需 要 对 其 进行 拆 解 ， 通 过 将 含有 大 量 信息 的 表 
单 拆 解 成 多 个 简单 任务 表单 ， 将 复杂 的 程序 简单 化 。 虽 然 这 增加 了 交互 的 路 径 ， 但 是 被 拆 


解 的 每 个 表单 都 将 信息 简化 ， 用 户 可 以 快速 录入 ， 每 完成 一 个 子 表单 的 录入 ， 用 户 内 心 就 
会 获得 一 定 的 成 就 感 ， 继 而 激励 用 户 完 成 所 有 的 表单 录入 ， 如 下 图 所 示 : 


看 看 大 计 都 在 实 哮 


9 北京 海淀 全 新 宝贝 
言 O 分 类 玩具 
及 布 闲置 手机 保 去 图 书 回收 价格 ¥ 10000 
卡 戎 回收 免 明 送 
’ 


转 转 
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转 转 的 发 布 器 将 发 布 任务 拆 分 多 个 子 任务 ， 用 户 通过 对 子 表单 进行 录入 ， 完 成 对 整体 表单 
的 录入 。 这 样 虽然 增加 了 表单 录入 的 步骤 ， 但 每 一 步 却 足够 简单 ， 不 会 给 用 户 造 成 困扰 ， 
最 终 提 升 了 整体 表单 录入 的 用 尸体 验 。 


3. 提供 及 时 的 状态 反馈 

当 用 户 在 进行 表单 录入 的 时 候 ， 及 时 的 状态 反馈 能 提高 产品 的 容错 率 ， 并 告诉 用 户 当前 所 
处 的 状态 以 及 下 一 步 应 该 怎么 办 。 在 表单 录入 的 时 候 有 两 种 常见 的 状态 ， 一 种 是 表单 录入 
错误 时 的 提示 ， 另 一 种 是 表单 录入 正确 时 的 提示 。 


1 ) 错误 提示 

当 录 入 错误 的 时 候 ， 我 们 需要 善意 地 提醒 用 户 当前 的 状态 错误 ， 并 且 详 细 地 告诉 用 户 哪 一 
步 出 现 了 占 题 ， 解 决 方案 是 什么 。 例 如 京东 的 登录 页 面 ， 用 户 在 登录 中 往往 会 犯 一 些 简 单 
的 错误 ， 例 如 验证 码 输入 错误 或 者 密码 强度 过 低 等 ， 这 个 时 候 及 时 的 状态 反馈 能 帮助 用 户 
修改 这 些 错误 ， 提 高 产品 的 容错 率 。 


四 担当 mill 全 下 午 2;55 全 了 86% mt 


你 好 ， 账号 或 密码 
欢迎 来 到 京东 金 


18888888888 


2 ) 正确 提示 

当 用 户 录 入 正确 的 时 候 ， 我 们 需要 给 予 用 户 操作 成 功 的 反馈 ， 并 鼓励 和 夸奖 用 户 ， 使 得 用 
户 获得 成 惑 感 ， 有 足够 的 动力 继续 使 用 产品 或 分 享 至 其 他 平台 ， 提 高 产品 的 留 仓 。 使 用 友 
布 器 发 布 成 功 的 时 候 束 是 一 个 例子 ， 如 下 图 所 示 : 
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all 中 国联 通 令 下 午 3:00 @ 7 3% me).s 


发 布 成 功 
分 享 到 以 下 平台 ， 履 得 更 多 隘 光 


二 人 各 人 如 女 


钱 信 朋友 图 QQ 币 博 QQ 空间 


请 鉴 惕 骗子 冒充 闲 鱼 及 淘宝 客 乳 ， 以 收取 消费 者 
保证 金 为 借口 进行 欺诈 的 行为 ， 了 解 更 务 > 


亲鱼 


朵 鱼 中 ， 当 用 户 经 过 一 系列 表单 的 填写 最 终 上 友 布 成 功 ， 产 品 会 第 一 时 间 告 知 用 户 ， 用 户 获 
得 成 就 感 继而 有 动力 分 享 到 其 他 平台 ， 提 高 了 产品 的 曝光 率 。 


4. 设计 符合 当前 使 用 场景 


表单 设计 符合 用 户 当 前 的 使 用 场景 ， 能 够 增强 用 户 的 认同 感 ， 满 足 用户 的 情感 需求 ， 并 且 
能 够 告诉 用 户 当前 所 处 的 位 置 以 及 下 一 步 应 该 怎么 做 。 例 如 ， 我 们 在 平时 订 咖 啡 外 卖 的 时 
候 ， 选 择 咖啡 规格 时 都 会 展示 一 张 精 美的 产品 图 ， 如 下 图 所 示 : 


Luckin coffee 
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通过 精美 的 图 片 为 用 户 和 营造 更 强 的 代入 感 ， 像 是 在 咖啡 馆 里 品尝 一 杯 醇 美 咖啡 ， 并 且 能 告 
诉 用 户 当前 正在 点 一 杯 美式 咖啡 ， 用 户 可 以 按照 自己 的 口味 人 在 规 格 列表 中 进行 迄 选 ， 最 终 
完成 选择 。 


加 分 项 : 流畅 的 动 效 


流畅 的 动 效 无 疑 是 表单 设计 的 加 分 项 ， 通 过 动 效 交互 能 增加 表单 切换 的 趣味 性 ， 并 且 
能 够 让 用 户 更 加 专注 于 当前 的 操作 。 动 效 还 可 以 帮助 表单 设计 更 好 地 进行 实时 反馈 ， 
吸引 用 尸 的 注意 力 。 例 如 ， 我 们 在 进行 菏 项 交互 操作 的 时 候 会 隐藏 挥 其 他 元 素 ， 用 成 
束 会 更 专注 于 当前 操作 ; 而 完成 这 一 项 操作 之 后 ， 会 结合 动 效 自动 弹出 其 他 选项 供用 
户 选 择 。 


图 片 来 源 于 Virgil Pana 


男 重 点 
( 1 ) 表单 设计 的 重要 性 ， 表 单 设计 是 用 户 与 产品 对 话 的 重要 途径 之 一 ， 优 秀 的 表单 设计 
能 够 帮助 用 户 提高 数据 录入 的 效率 、 容 错 率 ， 进 而 提高 整个 产品 的 用 户 留 存 。 


(2 ) 提升 表单 用 户 体 验 的 四 个 关键 步骤 . 首先 是 优化 信息 层级 ; 其 次 是 为 用 户 提供 便捷 
的 操作 流程 ， 减 少 不 必 要 的 操作 ; 再 者 ， 在 录入 表单 的 时 候 需 要 对 用 户 的 行为 进行 及 时 反 
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馈 ; 最 后 ， 表 单 设计 应 符合 用 户 当 前 的 使 用 场景 ， 能 够 满足 用 户 的 情感 需求 。 


( 3 ) 动 效 是 表单 设计 的 加 分 项 ， 合 理 运 用 动 效 设计 能 够 增加 页 面 的 趣味 性 ， 并 且 使 用 户 
更 加 专注 于 当前 的 操作 。 


由 


考 资料 
把 一 个 表单 设计 到 极致 是 怎样 一 种 体验 ? https://www.jianshu.com/p/06f1c20fde29 


拒绝 boring， 一 次 表单 设计 探索 https://www.jianshu.com/p/8b06271adf16 
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04 和 往 么 样 的 临 天 才 最 有 效 


在 日 常生 活 中 如 果 我 们 要 学 习 一 项 新 的 技能 时 ， 都 会 选择 从 模仿 开始 ， 模 仿 其 他 在 这 方面 
做 得 好 的 人 。 例 如 学 美术 时 ， 刚 开始 很 长 一 段 时 间 都 是 去 临摹 大 师 的 作品 ， 模 仿 他 们 的 画 
法 ， 等 到 一 定 的 阶段 才 开始 写生 ， 照 着 实物 画 。 在 写生 时 会 不 自觉 用 到 临摹 时 积 罕 的 方 
法 ， 遇 到 不 会 田 的 物品 时 ， 也 会 再 回 过 头 去 临摹 ， 循 环 往复 ， 最 终 找 到 适合 自己 的 风格 。 
这 个 过 程 根据 个 人 能 力 有 长 有 短 ， 但 是 每 个 人 都 必须 经 历 无 法 避免 。 


在 做 U1 的 时 候 ， 我 友 现 也 和 上 述 过 程 有 很 多 异曲同工 之 处 。 前 期 都 是 需要 去 大 量 临 荡 
好 看 的 页 面 ， 然 后 记忆 ， 形 成 条 件 反 射 ， 化 为 己 用 ， 再 形成 目 我 独特 的 风格 。 但 很 多 新 
手 在 入 行 之 初 ， 完 全 忽略 了 这 点 ， 拿 到 原型 之 后 ， 一 味 地 想 目 我 创新 ， 页 面 布 局 、 字 体 
大 小 、 间 距 等 都 没有 深入 去 研究 ， 完 全 赁 着 感觉 来 。 这 样 做 不 好 也 实 属 正 常 。 


本 化 为 形成 
© ety 


那 息 么 改善 这 一 情况 呢 ? 我 有 一 个 自己 的 小 办 法 : 回归 原始 从 临 莫 优 秀 作品 开始 ， 慢 慢 积 
索 再 形成 目 己 的 设计 风格 。 


怎么 找 临 斧 宗 材 


I 临 戎 最 重要 的 融 是 找 素 材 ， 素 材 的 好 坏 直 接 影 响 到 后 期 的 效果 。 建 议 临 莫 线 上 App， 线 上 
App 的 页 面 在 沙 地 前 经 过 很 多 人 的 打磨 ， 特 别 是 那些 大 公司 的 App， 多 去 临 莫 并 从 中 总 
结 出 规律 所 在 。 
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中 中 国 移动 4G 19:15 506% 无 SIM 卡 令 19:17 * 10094 mm 
富 。 g 财 富 日 白条 口供 钱 入 ENJOYasrun Q 
4 情 旋 、 会 选 、 有 格调 
乒 和 美酒 按 好 物 忧 进食 品 蜂 上 午 和 荣 
小 全 今日 新 品 限时 特 灵 。 ”福利 中 心 
笃 日 徐 新 天 天 大 了 权重 站 值 折 各 帮 蛋 井深 不 爷 
DD a 免费 领 Phone 新 机 国 EE 你 Fe ) 
四 京东 小 金库 1.38 
您 的 礼 利 已 这 这 0 快递 到 家 1 和 
加 食 闫 酒 好 物 ENJOY 关山 生子 了 准 种 
口 让 工商 好 去 处 
9 全 合生 随 存 随 取 4.4% 
人 全 保 刚 当日 起 时 
四 基金 
网 红 基 年 王 %% 新 人类 选 
日 保险 站 Ee 专题 柄 举 
Fo] Ei © 2 加 白 2 四 这 O 
首页 竹村 读 层 践 精 选 叶 } 史 旭 市 阳 千 未 好 了 
京东 金融 ENJOY 


| 临 莫 四 步 曲 


很 多 人 临摹 的 时 候 ， 总 喜欢 比照 着 原 图 进行 “描摹 ”， 但 这 样 的 成 效 有 限 ， 没 有 经 过 
太 多 的 思考 。 我 建议 可 以 描摹 完 之 后 再 凭借 记忆 男 一 裔 ， 男 完 之 后 表 比 照 着 原 图 进行 
修改 。 

在 临摹 时 也 需要 有 侧重 点 ， 可 以 先 从 图 标 开始 ， 然 后 再 扩展 到 布局 、 字 号 、 间 距 等 ， 逐 个 


击破 。 之 所 以 推荐 从 图 标 开始 ， 是 因为 它 是 每 个 App 中 不 可 或 缺 的 ， 画 不 好 会 直接 导致 
页 面 不 精细 ， 没 有 细节 ， 而 画 得 好 的 话 也 能 直接 提升 页 面 质感 。 


1. 图 标 
初期 只 需要 单一 地 临 募 图 标 ， 不 过 需要 注意 的 是 不 要 只 临 莫 一 两 个 ， 而 要 整套 临 莫 ， 一 两 
个 图 标 看 不 出 来 整体 性 ， 而 UI 界面 上 的 图 标 也 是 整套 出 现 ， 不 会 单独 存在 。 
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过 程 中 也 要 有 意识 地 找 一 些 当前 不 会 画 的 、 和 之 前 风格 不 一 样 的 图 标 ， 扩 展 贸 度 以 及 转换 
思维 ， 不 要 把 目 己 限 制 在 一 个 局 限 的 空间 里 。 


检 A a 总 SP 
时 四 口 © 


等 手头 功夫 练 到 一 定 阶段 的 上 时候， 再 去 和 页 面相 结合 。 前 期 练 手 头 功夫 很 重要 ， 相 当 于 打 
地 基 ， 单 纯 的 临 荐 图 标 会 让 你 更 企 意 图 标本 身 ， 如 它们 是 否 和 原 图 一 致 ， 和 号 么 画 才 最 方便 
最 快速 等 。 


如 果 一 开始 就 临 募 一 整个 页 面 ， 融 会 过 多 地 去 关注 页 面 ， 而 忽略 了 图 标的 细节 。 举 个 例 
子 ， 下 图 两 个 页 面 第 一 眼看 到 的 肯定 是 整体 的 页 面 风格 、 调 性 怎么 样 ， 看 完 之 后 可 能 还 会 
党 得 这 两 个 页 面 是 一 样 的 ， 没 有 区 别 。 


ses9° hotch 他 


XXVH- 鹿 险 XXVII- 鹿 险 
so 隔 的 帮 字 新 名 衬 k 如 事 


ooooe oooo9 


猜 你 喜欢 更 多 》 猜 你 喜欢 更 多 》 
| 
会 | ww | 会 忆 ww : 


由 面 1 页 面 2 


但 其 实 并 不 是 ， 注 意 看 一 下 导航 栏 上 的 图 标 ， 它 们 在 细节 上 有 很 多 不 一 样 。 页 面 1 的 3 个 图 
标 摘 边 粗 细 、 大 小 都 不 一 致 。 而 页 面 2 是 调整 后 的 ， 看 起 来 整体 统一 很 多 。 这 些小 细节 在 
整体 页 面 中 很 容易 忽视 ， 但 是 当 把 它们 单 近 出 来 时 ， 融 很 容易 友 现 器 题 所 企 了 。 


口 山 CO 器 由 OQ 


人 
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以 上 只 是 列举 的 一 个 小 例子 ， 在 实际 工作 中 还 有 很 多 ， 所 以 建议 先 临 莫 整 套图 标 ， 把 一 整 
套图 标 放 到 一 起 ， 看 看 是 否 统一 。 


2. 页 面 

当 第 一 步 攻 克 的 时 候 ， 束 可 以 到 下 一 步 临 莫 整 套 页 面 了 。 去 找 几 个 线 上 的 图 标 多 的 页 面 ， 
最 常见 的 就 是 个 人 中 心 页 面 以 及 视频 类 App 的 频道 页 。 临 莫 整 个 页 面 时 融 要 多 去 注意 图 
标 和 页 面 风格 是 否 一 致 、 图 标 和 了 字体 是 否 匹 配 等 。 
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3. 分 析 总 结 


临摹 完了 之 后 ， 要 学 会 总 结 。 例 如 个 人 中 心 图 标 一 般 多 大 、 配 多 大 的 文字 以 及 颜色 等 ， 
不 然 久 了 之 后 就 都 忘 了 ， 白 临摹 了 。 例 如 拿 刚 刚 京 东 金 融和 陌 陌 的 页 面 举例 . 京东 金 
融 是 40 x 40px 的 图 标 配 32px 的 文字 ，cell 的 高 度 是 100px ( 文中 测量 数值 仅 代表 本 
人 观点 ) 。 


= = 会 员 中 心 100 金币 1 
轩 我 的 银行 卡 
国 ”我 的 卡 券 我 的 优惠 券 、 会 员 卡 
京东 金融 


而 陌 陌 是 48 x 48px 的 图 标 配 36px 的 文字 ，cell 的 高 度 是 100px。 


2 本 会 员 中 心 100 ”普通 用 户 
国 陌 陌 钱包 
国 游戏 中 心 
陌 阳 


再 对 比 两 个 产品 ， 你 会 友 现 虽然 它们 的 字号 和 图 标 大 小 不 一 样 ， 但 是 它们 的 cell 高 度 都 是 
100px， 那 下 次 自己 做 的 时 候 束 可 以 优先 兰 试 100px 的 cell 高 度 。 这 样 等 积累 的 素材 够 
多 时 ， 自 己 再 做 页 面 的 时 候 就 心中 有 谱 了 。 


再 额外 扩充 一 点 ， 两 个 App 中 图 标 距 离 文 字 和 图 标 距 离 页 面 边 距 是 一 样 大 的 ， 一 个 都 是 
32px， 一 个 都 是 30px。 


2 会 员 中 心 2 会员 中 心 
京东 金融 陌 陌 


按照 我 们 正常 的 理解 ， 肯 定 是 图 标 距 离 文 字 更 近 点 ， 为 什么 这 两 个 App 是 一 样 的 呢 ? 是 
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不 是 所 有 的 App 都 是 这 样 的 ? 这 个 时 候 我 们 就 可 以 再 多 去 截图 几 个 案例 加 以 对 比 。 如 下 
图 虾米 音乐 的 间距 一 个 是 48px， 一 个 是 28px， 图 标 到 文字 的 距离 小 于 页 边 距 。 


入 加 一 会员 中 心 。 > 
国 任务 中 心 。 > 
团 养 古 米 。 > 

虾米 音乐 


得 到 的 间距 一 个 是 36px， 一 个 是 28px， 图 标 到 文字 的 距离 也 小 于 页 边 距 。 


兰 鲍 有 我 的 优惠 券 ) 
国 已 下 载 音频 6 ， 


国 推荐 /得 到 | 给 好 友 ， 
送 好 友 得 到 优惠 券 


得 到 


那么 就 可 以 大 致 得 出 一 个 结论 : 图 标 到 文字 的 距离 小 于 或 者 等 于 页 边 距 ， 而 不 能 大 于 页 
边 距 。 


过 
并 
X4 
改 
总 
V 
© 


在 这 里 只 是 给 大 家 提供 一 个 思路 ， 在 临 慕 的 时 候 遇 到 任何 问题 ， 觉 得 不 对 劲 的 地 方 ， 都 可 
以 再 多 去 找 几 个 App 进 行 对 比 ， 从 中 找到 规律 所 在 。 当 这 些 规律 是 你 目 己 总 结 出 来 的 ， 而 
不 是 别人 直接 告诉 你 的 时 候 ， 印 象 也 会 更 加 深刻 。 


4. 举一反三 


1) 颜色 
当 总 结 完 图 标的 大 小 以 及 间距 、 字 体 等 之 后 ， 其 实 还 有 一 个 很 天 键 的 元 素 需要 注意 ， 那 就 
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是 图 标的 颜色 。 颜 色 非 常 能 体现 一 个 App 的 气质 ， 一 套 经 典 的 配色 能 让 人 一 眼 认 出 来 ， 
而 颜色 最 重要 的 一 点 就 是 需要 和 产品 的 调 性 相符 合 。 如 下 图 所 示 ， 作 为 金融 类 产品 ， 京 东 
金融 配色 就 很 稳重 ， 而 陌 陌 的 配色 就 更 年 轻 、 活 泌 。 


O00 
ee@@g@@- 


平时 可 以 多 积累 几 套 配色 ， 培 养 目 己 的 色彩 感觉 。 也 可 以 兰 试 在 临 莫 完 一 套图 标的 时 候 ， 
重新 给 它们 配 一 套 颜 色 。 你 会 友 现 当 颜 色 改 变 的 时 候 ， 图 标 整 体 的 感 营 也 截然 不 同 。 


图 熏 W 兴 FP 


v 


JU 人 家 县 村 


当然 你 也 可 以 尝试 用 同一 套 配 色 去 设计 不 同 的 图 标 造型 ， 尽 情 去 尝试 你 觉得 想 做 的 方向 ， 
你 会 友 现 很 有 意思 。 人 在 这 过 程 中 你 也 会 感悟 到 很 多 。 


县 各 日 匠 i 
口 {3 © 辐 
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2) 概念 稿 

六 是 做 一 些 线 上 的 落地 稿 的 时 候 ， 难 免 会 限制 自己 的 思维 ， 所 以 我 们 需要 做 一 些 概念 稿 ， 
放飞 一 下 上 自我 。 例 如 在 临 莫 完 一 张 页 面 的 时 候 ， 可 以 基于 这 个 页 面 的 功能 和 目 己 重 构 一 个 ， 
这 样 的 好 处 是 页 面 功能 可 以 落地 ， 同 时 也 能 锻炼 自己 的 产品 思维 。 


{ 章 快手 晚餐 章 } 火 腿 肠 滑 
蛋 西 兰花 
7.8 综 合 评分 。4 人 最 近 7 天 做 过 人 Three people's menu 

下 亢 会 窒 15 

2 SR 六 和 可, QQ 

用 料 瑟 舌 进 菜篮子 人 me of oranges 
SUsShI is made from re fis 

OO 图 传 作品 

线 上 概念 稿 


辆 重 操 


工作 得 越久 ， 越 会 友 现 UI 是 有 规律 可 循 的 ， 只 要 平时 你 多 注意 、 多 积 罕 ,一步 一 个 脚 
印 ， 技 法 只 要 上 衣 伦 时 间 都 能 学 会 。 越 到 后 面 看 的 其 实 是 思维 方式 ， 善 于 思考 的 人 ， 上 总 能 从 
过 往 的 经 历 里 总 结 出 一 套 方 法 论 。 


刚 入 行 的 读者 也 不 要 着 急 ， 先 从 临 革 开始 ， 从 临 村 一 个 图 标 到 一 整套 图 标 、 再 到 整个 界 
面 ， 慢 慢 循序 渐进 ， 总 会 有 做 好 的 那 一 天 。 
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05 设计 稿 如 何 目 醒 


文 / 吴 萌 


在 设计 过 程 中 ， 设 计 师 很 容易 陷入 到 菏 一 个 细节 中 ， 对 其 他 细节 和 整体 就 忽视 了 。 这 个 时 
候 融 需要 人 芷 交 稿 前 ， 对 设计 稿 进行 目 查 ， 把 一 些 低级 的 错误 扼杀 企 摇篮 中 。 


自 查 内 容 大 致 分 为 两 类 ， 一 是 设计 稿 本 身 ， 二 是 与 其 他 页 面 的 统一 性 。 在 这 里 有 个 建议 ， 
当 设 计 稿 做 完 的 时 候 ， 先 搁置 一 段 时 间 ， 稍 后 再 检查 。 


设计 稿 本 身 


检查 设计 稿 本 身 指 的 是 就 当前 负面 检 查 所 存在 的 | 问题， 错误 包括 没 对 齐 、 图 标 风 格 和 大 小 
不 统一 、 上 间距 过 大 过 小 、 文 字 对 比 不 明显 、 图 片 没有 铺 满 等 。 


1. 对 齐 
页 面 上 的 元 素 必须 有 对 齐 的 方式 。 左 对 齐 、 右 对 齐 、 居 中 对 齐 都 可 以 ， 但 一 定 要 有 明显 的 
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自 查 的 时 候 首 先 要 注意 那些 明显 没 对 齐 的 地 方 。 为 了 方便 大 家 看 清楚 差别 ， 所 以 示意 图 稍 
微 夸张 了 点 ， 实 际 大 多 是 一 两 个 像素 没 对 齐 。 


2. 图 标 


1) 风格 
检查 一 下 图 标的 风格 是 不 是 一 样 ， 例 如 面 性 的 就 都 是 面 性 的 ， 线 性 的 都 是 线性 的 。 


2 ) 大 小 

大 小 主要 指 的 是 图 标 在 页 面 中 的 比例 大 小 在 视 党 层面 上 是 否 合适 ， 有 些 时 候 图 标本 身 风 
格 、 样 式 都 没什么 问题 ， 但 就 是 跟 页 面 其 他 元 素 相 比 太 大 或 者 太 小 了 。 还 需要 注意 一 点 ， 
物理 大 小 一 样 不 代表 视 党 大 小 也 一 致 ， 优 先 满足 视 党 大 小 一 致 。 


= 订单 目 订单 
和 消息 全 消息 
从 在 线 客服 们 ”在 线 客服 
网 设置 @ 设置 
@ © 


左边 的 图 标 单个 看 没什么 问题 ， 但 和 文字 放 一 起 ， 图 标 就 显得 整体 大 了 很 多 ， 看 起 来 极其 
不 协调 。 而 右边 就 看 起 来 般配 一 点 。 


3. 间距 

间距 是 用 来 区 分 层级 的 ， 间 距 的 大 与 小 或 多 或 少 会 影响 到 这 一 点 。 正 如 《 写 给 大 家 看 的 设 
计 书 》 中 所 说 的 杀 密 性 一 样 ， 区 分 层级 的 本 质 也 就 是 区 分 亲密 性 ， 页 面 上 间距 最 小 的 杀 密 
性 最 强 ， 属 于 同一 层级 ; 页 面 上 间距 最 大 的 杀 密 性 最 弱 ， 不 属于 同一 层级 。 
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自 查 的 时 候 需 要 着 重 看 一 下 ， 信 息 层级 是 否 区 分 开 了 ， 例 如 两 个 模块 之 间 的 间距 一 定 要 大 
于 模块 内 部 的 上 间距 。 


@ ”模块 内 部 间距 
全 ”模块 与 模块 间距 


@ < 


4. 对 比 

区 分 层级 除了 通过 间距 还 可 以 通过 对 比 ， 对 比 的 方式 、 种 类 有 很 多 种 ， 这 里 就 不 一 一 展开 
了 ， 只 讲 文字 间 的 颜色 对 比 。 以 讨论 区 为 例 ， 讨 论 区 一 般 包 合用 户头 像 、 了 昵称 、 时 间 、 评 
论 内 容 以 及 一 些 辅助 的 功能 ， 如 扣 赞 、 收 藏 、 评 论 、 回 复 等 。 


下 图 中 喜马拉雅 和 了 网易 新 闻 两 者 相 比 起 来 ， 就 信息 层级 来 说 ， 网 易 新 闻 区 分 得 更 开 一 点 ， 
层级 更 明确 。 
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无 SM 卡 涩 1 20:59 94% mm 
< 所 有 评论 (177) 
二 兰 兰 老 me 
差点 以 为 手机 出 问题 了 。 开 头 竟然 没 声 
. 傅 
。 ”回复 只 2 


星 原 _qq: 调 了 半天 的 音量 ， 结 果 突 然 一 声 把 
我 耳 打 震 荔 了 


鸿 蒙 邪 念 : 我 是 戴 着 耳机 和 的， 结果 .……… 
顾 一 念 爱 你 : 压 死人 
查看 全 部 30 条 回复 


慎独 _ktd 
史上 最 长 最 无 聊 开 场 ，，， 


， ”回复 响 10 
小 盯 当 : 这 是 有 视频 直播 的 ， 所 以 开场 才 是 
这 样 的 


九 妹 人 党 信号 ggbb2325: 借 


Caesar [9y 


我 铺 测 ， 此 刻 桨 可 能 有 话 想 这 


喜马拉雅 


而 去 对 比 它们 页 面 所 使 用 的 颜色 ， 就 可 以 友 现 ， 网 易 新 闻 的 颜色 对 比 度 更 大 ， 对 比 度 大 ， 


言 息 上 自然而然 就 更 明显 了 。 


@ #666666 28px 


#000000 30px 


#999999 #666666 22px 园 108 
我 是 文字 文字 文字 #333333 28px 行 高 
A0px 
啦 啦 啦 : 我 的 


喜马拉雅 


我 们 在 交付 前 设计 自 查 时 ， 就 需要 着 重 检查 一 下 页 面 的 信息 是 否 区 分 开 了 ， 对 比 度 是 
次 的 自 查 了 ， 新 手 可 能 很 难 友 现 问题 ， RE 


合理 ° Rt-— 点 算 比 较 深 层 
的 帮忙 。 


无 SIM 卡 全 20:57 * 95% mm 
《 
热门 跟 贴 


© miaobi ai 


机 动车 请 继续 背 锅 镶 


他 ”有 访 度 网 友 07ne3R 


下 雨 就 好 了 


Eh 罗 罗 576 


1 有 态度 网友 07ne3R 
下 雨 就 好 了 


刮 几 次 大 风 估 计 就 蓝天 白云 了 ， 至 少 5 
级 以 上 的 


2 火星 网 友 


我 们 渴望 有 个 健康 的 空气 环境 。。 


图 


网 另 新 闻 


用 
I rx 
Es 


辅助 信息 


© #1B88EE 28px 


1 有 态度 


#333 36px 


我 是 文字 文字 #333333 36px 默认 行 高 


5Opx 


网 吻 新 闻 
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5. 图 片 


佳 Sketch 里 ， 大 家 都 是 画 一 个 矩形 ， 然 后 和 图 片 一 起 做 成 蒙 版 ,但 有 时 候 会 出 现 图 片 没 
有 铺 满 整 个 矩形 的 情况 ， 如 下 图 所 示 : 


图 片 来 源 于 网 络 


有 时 候 图 片 比较 小 〈 例如 头像 ) ， 手 机 预览 的 时 候 不 容易 被 看 到 ， 所 以 在 自 查 的 时 候 最 好 
把 设计 稳 放 大 查看 细节 。 


页 面 统一 性 


页 面 统 一 性 指 的 是 App 整体 的 统一 性 ， 如 输出 的 设计 稿 是 否 和 之 前 统一 ， 同 时 输出 的 几 
个 页 面 是 否 统一 等 。 这 个 时 候 就 需要 跳出 单个 页 面 ， 来 看 整体 了 。 最 容易 出 错 的 问题 有 |: 
两 个 页 面 同一 位 置 的 元 素 位 置 出 现 偏 移 、 分 割 线 颜 色 不 一 样 、 按 钮 的 圆 角 度 不 统一 等 。 


1. 位 置 偏 移 
很 多 人 做 设计 图 的 时 候 ， 都 是 计算 机 连 着 手机 实时 预览 ， 预 览 软 件 在 翻 页 的 时 候 ， 是 直接 
出 现 新 的 页 面 ， 不 是 那 种 一 页 一 页 翻 的 形式 。 所 以 当 元 素 位 置 发 生 偏 移 的 时 候 ， 纯 靠 手 机 
预览 很 难 发 现 。 
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同一 元 素 位 置 发 生 偏 移 


至 于 解决 方案 也 很 简单 ， 只 需要 目 查 的 时 候 ， 把 所 有 图 按照 顺序 导出 ， 全 部 选中 进行 预 
览 ， 这 个 时 候 页 面 元 素 偏 移 的 话 ， 在 翻 页 过 程 中 就 会 极其 明显 。 友 现 有 出 错 的 地 方 ， 融 重 
新 修改 再 导出 ， 直 至 没有 问题 为 止 。 


2. 分 割 线 


分 割 线 也 是 一 个 极 易 出 错 的 地 方 ， 特 别 是 最 开始 做 的 时 候 没 有 定义 分 割 线 的 颜色 ， 随 便 用 
一 个 ， 后 续 沈 得 不 好 又 改 了 ， 改 得 又 不 彻底 ， 有 些 地 万 没 改 到 。 加 上 分 割 线 颜色 普遍 仿 
浅 ， 不 仔细 看 很 难 上 友 现 。 


分 割 线 颜 色 不 一 致 


上 自 查 的 时 候 这 一 项 通过 翻 页 预见 友 现 后 也 能 修改 ， 不 过 还 有 一 个 更 好 的 办 法 : 从 源头 改 
变 。 前 期 把 分 割 线 都 做 成 Symbols， 统 一 套用 ， 后 期 自 查 的 时 候 ， 只 需要 检查 分 割 线 是 
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否 用 的 是 Symbols 即 可 ， 是 的 话 颜 色 肯 定 是 一 样 的 。 


3. 按钮 圆 角 度 


检查 不 同 页 面 的 按钮 圆 角 度 是 否 一 致 ， 不 一 致 的 地 方 要 统一 。 定 好 规范 之 后 ， 后 续 所 有 的 
页 面 都 需要 延续 。 


按钮 贺 角 度 不 一 样 


辆 重 操 


在 设计 稿 输出 交付 前 ， 设 计 师 需要 对 自己 的 设计 稿 先 上 自 查 一 裔 ， 避 免 出 现 低 级 错误 。 不 然 
这 些 错误 每 ;次 都 等 别人 发 现 ， 会 影响 你 在 团队 中 的 形象 。 


自 查 主要 分 两 个 方面 ， 一 个 是 设计 稿 本 身 ， 需 要 注意 页 面 元 素 对 齐 、 图 标 风 格 和 大 小 与 页 
面 整体 搭配 、 间 距 要 能 体现 杀 密 性 、 文 字 对 比 要 明显 ; 二 是 页 面 整体 的 统一 性 ， 需 要 注意 
的 是 避免 出 现 同一 元 素 在 不 同 页 面 位 置 友 生 偏 黎 、 分 割 线 颜 色 不 统一 、 按 钮 的 圆 角 度 不 统 
一 等 。 
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06 ”如 何 准备 一 份 合格 的 作品 集 


文 / 付 钼 更 


作品 集 对 于 设计 师 是 至 天 重要 的 ， 当 我 们 另 谋 高 就 时 ， 可 能 会 出 现 以 下 的 状况 : 没 作 品 、 
没有 线 上 的 作品 、 还 原 度 不 够 等 ， 紧 接着 就 是 一 味 地 抱怨 诉苦 ， 埋 怨 自 己 没 有 遇 到 好 的 平 
台 ， 没 有 遇 到 一 个 重视 设计 的 好 老板 ， 没 有 好 的 产品 经 理 ， 没 有 可 以 实现 目 己 设计 的 好 开 
发 者 等 ， 其 实 应 该 先 从 自己 入 手 解 决 问题 。 


作品 集 准 备 周期 要 6 个 月 ? 


我 们 可 以 回想 下 ， 每 次 身边 人 在 问 你 有 没有 准备 作品 集 上 时， 是 不 是 都 有 过 类 似 的 回答 : 
我 还 没 打 算 换 工作 ， 等 要 换 的 时 候 再 准备 吧 !1 ” 亦 或 是 “现在 手 上 的 作品 都 不 太 满意 ， 
等 我 改 到 满意 的 时 候 再 开始 准备 。 “其实 这 些 都 是 借口 ， 我 们 对 优秀 作品 集 需要 的 时 间 的 
没有 概念 ， 才 会 一 拖 再 抱 。 我 们 要 清楚 准备 作品 集束 和 期 末 考 试 一 样 ， 没 有 前 半年 的 学 
习 ， 只 靠 一 两 周 的 突击 是 不 会 有 好 成 绩 的 。 所 以 ， 我 认为 一 个 优秀 作品 集 的 准备 周期 最 低 
要 用 半年 的 时 | 间 。 接 下 来 我 会 通过 三 点 说 明 为 什么 我 们 要 准备 6 个 月 。 


1. 设计 依据 

准备 作品 集 不 仅 要 从 平日 的 设计 稿 中 挑选 精品 集合 起 来 ， 还 要 对 每 一 个 我 们 自己 觉得 好 的 
地 方 做 出 设计 说 明 。 因 为 面试 官 也 会 通过 作品 的 内 容 提 出 很 多 专业 性 的 问题 ， 所 以 整理 作 
品 集 的 过 程 也 是 我 们 对 项 目 再 次 认 知 的 过 程 。 通 常 我 们 会 在 界面 附近 加 入 一 些 设计 依据 和 
产品 概述 等 文字 ， 充 分 体现 出 目 身 对 专业 知识 的 理解 和 运用 。 对 于 作品 集 而 言 ， 创 作 作品 
时 的 调查 研究 过 程 与 完成 的 作品 本 身 同样 重要 ， 如 下 图 所 示 : 
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主要 工作 : 掌握 基本 的 设计 理论 ， 了 解 产 品 思 路 ， 可 以 完整 并 流畅 地 说 出 设计 依据 。 为 了 
体现 表达 的 逻辑 性 ， 还 需要 提高 文字 的 书写 能 力 。 


2. 反复 更 改 


在 整理 作品 集 的 时 候 ， 由 于 每 套 作品 创作 的 时 间 周 期 不 同 ， 即 便 是 自己 的 设计 作品 ， 也 会 
因 时 间 关 导致 设计 质量 的 不 同 。 所 以 ， 需 要 我 们 不 定期 进行 维护 来 保证 作品 放 入 作品 集 后 
不 会 拉 低 整体 的 分 数 。 对 于 维护 的 范围 那 就 很 广 了 ， 可 以 是 目前 的 项 目 ， 也 可 以 是 之 前 的 
项 上 目 ， 甚 至 已 经 死 挥 的 项 目 。 如 果 你 觉得 这 是 你 喜欢 的 或 者 是 可 以 体现 你 想法 的 项 目 ， 融 
可 以 自己 去 优化 迭代 ， 变 成 自己 的 作品 ， 如 下 图 所 示 : 


12:29 


时 SY 本 、 


Sen 


党 员 部 落 冲突 : 皇室 战争 


| 应 用 介绍 
《天 天 醒 购 》 是 大 讯 移动 游戏 平台 专 为 海 功 答 信 和 手机 QQ 
用 户 量 身 打 洁 的 一 款 精 品 手机 游戏 . 在 沿 获 传 统 玩法 的 基础 


| 其 他 用 户 也 下 载 了 


& Fa 
2017 年 设计 的 应 用 市 场 2018 年 设计 的 应 用 市 场 
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主要 工作 : 回顾 往 期 项 目 需求 ， 合 理 更 改 界面 模块 的 内 容 ， 定 期 对 已 有 界面 进行 更 新 
维护 。 


3. 时 间 秦 卢 化 

了 解 上 面 两 点 后 ， 可 能 有 些 人 还 是 会 认为 半年 的 时 间 太 久 了 。 但 是 要 知道 的 是 ， 大 部 分 人 的 
作品 集 都 是 利用 雁 片 化 时 间 去 做 的 ， 我 们 可 以 做 道 数 学 题 求 证 一 下 ， 半 年 到 底 有 多 长 时 间 是 
用 来 做 作品 集 的 。 理 想 一 点 ， 我 们 每 天 抽出 2 个 小 时 来 整理 作品 集 ，180 天 大 约 需 要 360 个 
小 时 ，360 二 24 = 15 天 ， 当 然 每 天 24 小 时 作 图 不 现实 。 我 们 再 把 时 间 分 一 下 ， 一 天 8 小 时 
工作 ，360=8=45 天 。 所 以 看 似 准 备 半 年 的 作品 集 ， 实 际 上 我 们 也 只 用 了 45 天 而 已 。 


拯救 线 上 作品 


很 多 人 都 抱怨 过 上 自己 公司 的 项 目 不 成 熟 ， 最 终 线 上 展示 效果 和 设计 图 相差 甚 远 等 问题 。 

年 过 去 后 ， 作 品 集 里 依然 没有 线 上 稿 的 存在 ， 只 有 自己 的 平日 练习 。 线 上 稿 的 效果 不 佳 一 
直 以 来 都 是 很 难 解决 的 问题 ( 大 公司 的 部 分 应 用 除外 ) ， 造 成 这 一 现象 的 因素 太 多 。 但 是 
我 们 不 能 无 所 作为 ， 我 们 要 从 目 身 改变 。 以 下 3 点 可 以 帮助 你 提升 线 上 稿 的 效果 ， 让 作品 


集 更 完善 。 


1. 新 正 心态 

认 清 自己 的 能 力 是 至 关 重 要 的 ， 我 发 现 很 多 人 平日 里 练习 的 设计 稿 都 要 比 在 公司 的 设计 好 
很 多 ， 我 自己 也 是 一 样 。 这 是 因为 自己 做 的 时 候 可 以 天 马 行 空 ， 还 可 以 用 漂亮 的 图 片 做 搭 
配 。 后 来 我 想 明 日 了 ， 这 些 都 是 客观 的 原因 ， 主 观 原 因 是 我 们 在 做 公司 产品 的 设计 时 ,无 
意 间 带 上 了 “完成 任务 ”的 心态 。 可 能 很 多 人 都 觉得 即便 设计 做 得 再 好 都 不 会 有 好 的 效 
果 ， 所 以 没有 全 力 以 赴 地 做 公司 的 产品 ， 设 计 能 力 平平 ， 长 时 间 没 有 突破 自我 ， 只 会 严重 
影响 自己 的 设计 生涯 。 


总 结 : 全 力 以 赴 地 做 公司 产品 ， 即 便 有 时 需求 确实 不 合理 ， 那 么 我 们 也 要 尽 可 能 地 在 不 合 
理 的 需求 下 做 到 好 看 。 不 要 懒惰 ， 一 版 不 好 就 再 来 一 版 ， 只 会 越 来 越 好 。 

2. 节省 开发 时 间 

当 我 们 提出 线 上 效果 不 好 时 ， 经 常 听 到 的 原因 是 开发 时 间 不 够 用 ， 无 法 达到 我 们 效果 图 的 
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预期 效果 。 可 是 ， 我 们 有 没有 思考 过 开发 时 间 不 够 用 的 原因 会 不 会 和 我 们 有 直接 关系 呢 ? 
例如 设计 不 合理 、 切 图 不 规范 、 标 注 错乱 等 问题 ， 增 加 了 工程 师 的 工作 难度 ， 导 致 开 发 效 

率 降 低 。 所 以 ， 我 们 必须 有 意识 地 在 我 们 的 职责 范围 内 去 解决 本 该 属于 我 们 的 工作 ， 来 节 
省 开发 的 时 间 。 


例如 ， 设 计 界 面 时 ， 考 虑 不 同 机 型 的 适 配 问 题 ; 标注 清晰 ， 有 详细 的 备注 说 明 ; 切 图 规 
范 ， 学 会 给 文件 夹 分 类 起 名 等 ， 这 些 看 似 小 的 细节 ， 却 可 以 帮助 工程 师 们 大 大 提高 工作 效 
率 ， 提 高 落地 后 的 设计 效果 ， 如 下 图 所 示 : 


无 SIM 卡 全 上 午 11:40 50%% 而 ) sses5 中 国 呢 久 46 下 午 5;28 46% 而 
EC3 
历史 记录 

1 

白夜 追思 合金 弹头 

白 
nD: 
中 国有 二 论 白雪 公主 


品 
污 [ 门 国 娱 乐 动漫 综艺 中 音 新 闻 ”局 


【首发 ]“ 小 日 子 科技 "完成 Pre- 
:eeA \ 折 于 次 要 打造 生 活 方式 的 - 

上 站 

8 岳 1 氟 : 马云 称 百联 是 零售 “ 祖 

师爷 ”"， 陆 金 所 否认 为 “明天 系 .. 


4 用 大 众 香水 的 已 经 Out 了 ， 现 在 5 ”微微 一 笑 很 倾城 山 
是 小 众 旨 水 的 春天 潮流 先锋 


PR 6 微微 一 物 vy 
标注 过 乱 标注 清晰 


总 结 : 葡 握 各 平台 界面 的 适 配 问 题 ， 多 站 人 芷 开 肥 人员 的 角度 去 思考 问题 ， 学 习 正 确 的 标注 
和 切 图 。 


3. 制定 设计 规范 

任何 时 候 都 不 要 小 看 规范 的 力量 。 刚 刚 上 班 的 一 段 时 | 间 里 ， 我 不 会 做 设计 规范 ， 有 问题 直 
接 坐 到 工程 师 劳 边 指 指点 点 ， 看 似 非常 有 效率 ， 但 这 种 方式 的 沟通 成 本 是 很 大 的 。 当 面 对 
多 个 工程 师 同 时 开发 不 同 模 块 时 ， 设 计 规 范 的 作用 就 显得 十 分 重要 了 。 我 们 可 以 把 工程 师 们 
组 织 起 来 ， 统 一 讲述 我 们 的 设计 规范 ， 让 工程 师 在 界面 开 友 时 有 据 可 循 。 越 清晰 的 设计 规范 
越 能 减少 我 们 的 时 间 成 本 ， 同 时 界面 的 统一 性 也 会 越 高 。 
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头像 
80*80 140 * 140 160 * 160 208 * 208 
Feed 流 个 人 中 心 收 改 资料 课程 


200 * 112 250 * 140 326 * 184 
订单 列表 、 详 情 页 礼包 详情 页 商品 大 图 产品 列表 页 
关于 界面 中 的 图 片 规范 整理 


总 结 : 即便 公司 不 给 你 留 制 作 设 计 规范 的 时 | 间 ， 也 要 找 业余 时 间 去 完成 一 套 设计 规范 ， 哪 
介 非 尝 简 易 ， 从 长 远 看 制作 设计 规 沁 的 时 间 也 要 小 于 日 后 的 沟通 时 间 。 


改版 思路 


上 面 的 三 点 都 可 以 帮助 我 们 优化 线 上 稳 。 当 然 ， 几 事 都 有 例外 ， 所 以 我 们 不 得 不 留 有 一 
招 。 那 么 ， 当 线 上 产品 无 法 进行 优化 时 要 怎么 办 呢 ? 如 下 图 所 示 : 
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线 上 稿 后 期 改版 
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简单 来 说 ， 融 是 目 己 做 改版 。 通 过 对 业务 需求 的 理解 ， 改 一 版 目 己 满意 的 设计 稿 ， 也 可 以 
将 其 放 入 你 的 作品 集中 。 它 可 以 体现 你 的 专业 素养 、 自 我 追求 、 执 行 力 等 多 方面 的 素质 。 


男 重 点 


作品 集 对 于 我 们 来 说 是 一 块 癌 门 砖 ， 是 面试 官 考察 设计 能 力 、 理 论 实践 的 重要 标准 。 因 
此 ， 我 们 必须 要 保证 无 论 是 在 做 什么 设计 都 有 一 颗 积 极 进取 的 心 ， 每 次 都 可 以 达到 自己 本 
该 实现 的 效果 。 比 起 抱怨 别人 ， 还 不 如 多 思考 一 下 如 何 对 自己 不 满意 的 线 上 稿 进行 改版 设 
计 更 实用 。 
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07 ”如 何 输出 一 份 完 整 的 测试 题 


文 / 付 钼 更 


许多 刚 入 行 的 设计 师 拿 着 公司 发 来 的 面试 题 一 筹 莫 展 ， 有 些 题 觉得 做 得 太 差 ， 需 要 重 
改 ; 有 些 题 觉得 已 经 做 得 很 好 了 ， 不 需要 改动 ， 但 也 要 去 硬 改 。 拿 到 面试 题 后 我 们 到 底 
该 如 何 面 对 呢 ? 考官 的 预期 又 是 什么 呢 ? 下面 结 合 个 人 经 验 来 说 说 拿 到 面试 题 后 的 六 个 
关键 步骤 。 


竞 品 分 析 


知己 知 彼 ， 才 能 百 战 不 殉 。 当 我 们 拿 到 面试 题 时 ， 如 果 是 线 上 产品 改版 ， 请 务必 下 载 该 产 
品 同类 App 中 的 佼佼 者 进行 简易 的 竞 品 分 析 ( 考虑 到 竞 品 分 析 时 间 过 长 ， 所 以 可 以 选 出 
几 点 来 做 对 比分 析 即 可 ) 。 如 下 图 ， 如 果 改 版 的 是 一 款 资讯 类 App， 可 以 下 载 多 个 同类 产 
品 进行 对 比 ， 如 下 图 所 示 : 


sssee 中 国 移动 令 下 午 4:52 了 ms 
< 搜 你 想 搜 的 OO 网易 3 @, 
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51.87 亿 元 易 主 ! 北京 盘古 一 键 登 录 ， 推 荐 内 容 更 精彩 登录 | x 
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周 ， 却 发 现 友 商都 已 换 上 .… 


内 地 周 票房 : 《 哪 噬 》 破 41 | 
亿 《 沉 默 的 证 、》 过 亿 新 能 源 车 电池 将 迎 "退役 潮 " 
I 


20 万 吨 旧 电池 怎么 处 理 


区 面膜 到 底 有 用 没 用 ? 皮肤 科 医 生 揭穿 证 
言 ， 为 你 省 下 90% 扩 北京 出 发 ， 大 家 爱 住 树 屋 民宿 ， 真 是 美 副 


肤 费 
他 ES 十 


航拍 重庆 两 江 交 汇 现 “ 甸 省 锅 " 景 观 一 清 一 


浊 - 泾 消 分 明 ~ 
六 D O © 型 > CC 必 
西 又 西 凡 视频 帘 头 条 小 视频 本 页 视 晓 直播 我 的 


今日 头条 网 另 新 闻 
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我 们 可 以 总 结 它 们 的 图 片 比例 是 多 少 、 标 题 和 内 容 字 号 的 差异 、 有 哪些 现在 流行 的 功 
能 〈 例如 视频 直播 功能 就 是 近 两 年 才 植 入 到 资讯 类 App 的 ) 。 除 了 通过 对 比 线 上 优秀 
应 用 测试 界面 中 存在 哪些 不 足 ， 还 要 了 解 同类 App 设计 趋势 ， 这 样 才能 明确 改版 的 方 
向 和 目的 。 


重点 : 况 品 分 析 可 以 为 我 们 提供 改版 思路 和 设计 素材 ， 竞 品 本 身 就 是 很 好 的 参考 。 


整理 界面 模块 的 主 次 关系 


接 下 来 我 们 要 对 测试 界面 的 布局 模块 进行 主 次 排序 。 这 一 步 很 重要 ， 因 为 相同 的 模块 摆 放 
到 不 同 的 位 置 其 设计 差别 是 很 大 的 ， 我 把 自如 的 页 面 做 了 些 变 化 当 案 例 ， 同 样 是 “租房 情 
报 局 ”模块 ， 放 在 页 面 头 屏 和 末 屏 的 展示 就 是 截然 不 同 的 。 当 然 如 果 测 试 界 面 的 主 次 天 系 
本 身 就 很 明确 ， 则 不 需要 强行 变动 。 


ZIfODrm 自 jz， 加 Q@ 〇 您 想 住 哪儿 mm 


我 要 租房 房屋 委托 


自如 客 故事 


| 三里屯 麦当劳 女孩 
儿 ， 房 间 里 有 一 面 昭 
| 片 墙 


Tr ee le 


唯一 的 家 


个 人 生活 ， 是 自 找 
的 吗 ? 


让 一 个 人 生活 ， 
还 有 一 种 情况 ， 就 是 极其 不 重要 的 模块 该 怎么 办 呢 ? 我 们 可 以 将 其 进行 弱化 ， 选 择 隐藏 到 
下 拉 菜 单 或 弹 窗 中 ， 但 不 可 以 随意 去 掉 ， 确 保 改 版 后 的 界面 不 会 为 用 尸 市 来 过 大 的 学 习 成 
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推荐 。 商城 ”游戏 。 音乐 。 电影 推荐 


商城 游戏 更 多 


左 侧 测试 界面 中 的 分 类 为 5 个 ， 如 果 就 用 户 点 击 体验 和 界面 效果 而 言 ， 摊 放 4 个 刚好 。 如 果 
起 过 了 该 怎么 解决 呢 ? 不 要 直接 去 掉 原 有 分 类 ， 可 以 增加 一 个 “更 多 ”选项 把 其 他 的 分 类 


隐藏 挥 。 


1. 字体 的 规 沁 性 


我 们 需要 对 面试 题 中 的 字体 、 字 号 和 颜色 进行 统一 归 类 ， 如 下 图 所 示 : 


主 标题 在 这 里 


副标题 在 这 里 不 需要 很 明显 明 
明 


主 标题 在 这 里 
副标题 在 这 里 不 需要 很 明 
显明 明 


如 果 测 试 界面 中 的 常规 字号 过 多 ， 用 户 在 阅读 时 会 感到 很 乱 ， 同 时 主 次 差异 变化 也 不 大 ， 


所 以 我 们 需要 整理 测试 界面 的 字号 大 小 。 
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主 标题 在 这 里 主 标题 在 这 里 
副标题 在 这 里 不 需要 很 明显 副标题 在 这 副标题 在 这 里 不 需要 很 明显 副标题 在 这 


此 外 也 要 注意 文字 的 层级 问题 ， 标 题 、 内 容 、 不 重要 文字 、 特 殊 文 字 等 要 规范 化 ， 该 强调 
的 要 进行 强调 ， 该 弱化 的 也 绝 不 合 糊 〈 可 以 参考 本 书 关 于 格式 塔 原理 的 解读 ) ， 合 理 优化 
用 户 阅 读 文 字 时 的 体验 。 


2. 风格 的 一 致 性 


风格 一 致 是 一 个 可 大 可 小 的 问题 ， 大 到 涉及 整个 页 面 的 统一 性 ， 如 页 面 整体 风格 为 圆 角 弥 
漫 效果 或 者 是 直角 局 平 化 ， 不 要 一 个 页 面 内 有 多 种 风格 的 元 素 出 现 。 


小 到 一 个 图 标 或 一 个 控件 样式 的 统一 ， 例 如 页 面 中 图 标 用 的 是 线性 图 标 ( 线性 图 标 需 要 注 
意 每 个 图 标 用 线 的 粗细 是 否 一 致 ) 还 是 面 性 图 标 ( 实心 图 标 需要 注意 都 是 纯色 图 标 还 是 渐 
变 图 标 ) 等 。 额 外 提 到 一 点 就 是 图 标的 认 知 性 ， 一 定 要 设计 简单 易 懂 的 图 标 ， 可 以 减少 用 
户 对 图 标的 学 习 成 本 。 
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oooeo ooooo 


二 手书 新 书 电子 书 书店 杂志 社 活动 


3. 颜色 的 统一 

明确 App 的 主 色 ， 如 淘宝 logo 为 杰 色 ， 界 面 的 主 色 则 为 杰 色 ; 京东 logo 为 红色 ， 则 界 
面 主 色 为 红色 。 我 们 在 对 测试 界面 进行 改版 时 ， 需 要 先 了 解 品 牌 颜色 ， 再 根据 品牌 色 去 选 
择 对 应 的 App 主 色 ， 颜 色 最 好 不 要 变化 过 大 ， 影 响 用 户 对 App 的 品牌 认 知 。 


小 泄 围 改 版 


对 于 改版 面试 题 可 能 很 多 同学 认为 改 得 面目 全 非 才 好 ， 其 实 不 然 。 真正 的 改版 设计 是 要 有 
真实 的 依据 ， 如 果 是 更 改线 上 稿 的 设计 ， 最 好 慎重 更 改 ， 有 些 模 块 的 用 户 体验 本 身 就 是 极 
佳 的 ， 不 需要 做 太 多 的 改动 ， 只 要 把 其 按 上 自己 的 风格 进行 规范 即 可 。 举 个 例子 ， 资 讯 类 
App 首页 目前 通常 都 是 以 列表 的 形式 展示 ， 所 以 我 们 只 要 调整 图 片 和 文字 所 占 页 面 的 比例 
即 可 。 


第 4 章 ”工作 困惑 


改版 说 明 


通常 改版 后 会 以 邮件 的 形式 发 送 回 去 ， 如 果 没 有 明确 的 改版 说 明 ， 对 方 可 能 会 党 得 我 们 仪 
仅 是 为 了 视 党 和 个 人 偏好 而 更 改 ， 降 低 了 改版 后 的 可 用 性 。 所 以 在 改版 后 ， 一 定 要 对 每 一 
处 更 改进 行 说 明 标 注 ， 摘 述 出 自己 的 设计 理念 和 思路 ， 这 样 可 以 更 加 有 效 说 服 看 稿 人 。 总 
之 ， 改 版 设计 不 可 以 只 是 赁 感 堂 ， 要 做 到 有 理 有 据 才 可 以 。 


得 到 App 改 版 说 明 


模块 中 的 icon| 上 日 版 : 
1. 得 整体 层次 上 过 于 单调 ， 没 有 突出 的 重点 。 
2.icon 颜 色 饮 和 度 过 低 ， 页 面 颜 色 不 够 活跃 。 


模块 中 的 iCON 新 版 : 
1. 改 变 iCON 的 样式 ， 增 加 层次 ， 强 化 细节 


© 0 C2 © 日 ee RN 提高 功能 曝光 度 。 


电子 书 每 天 昕 本 书 系列 全 部 


得 到 改版 练习 


集 思 厂 蔓 


如 果 自 己 不 能 确定 最 终 的 改版 是 否 成 功 ， 可 以 把 改版 后 的 方案 和 原 图 发 给 你 身边 的 朋友 。 
这 里 可 以 分 为 两 部 分 群体 : 专业 人 士 和 非 专业 人 士 。 专 业 人 士 可 以 很 好 地 提供 对 界面 设计 
上 的 建议 ， 提 高 页 面 质量 。 非 专业 人 十 更 像 是 你 的 用 户 群 体 ， 没 有 专业 知识 的 俩 匈 ， 可 以 
仅仅 凭借 自己 的 体验 做 出 判断 ， 帮 助 你 检查 更 改 后 的 部 分 是 否 和 更 改 初衷 相 吻 合 。 


总 结 


互联 网 产品 的 节奏 特点 就 像 小 步 快 跑 ， 需 要 不 断 和 迭代 优化 ， 因 此 产品 改版 是 家 单 便 饭 。 通 
单 的 改版 只 要 做 好 两 件 事 即 可 : 友 现 问题 、 解 决 占 题 。 如 果 你 的 改版 可 以 解决 目前 App 
存在 的 问题 ， 你 的 改版 就 是 成 功 的 。 所 以 ， 明 确 ; 测 试 页 面 存 在 的 问题 才 是 大 前 提 ， 切 勿 急 
于 求 成 。 
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有 致 项 


本 书 最 终 得 以 出 版 ， 首 先 我 们 要 感谢 所 有 读者 朋友 平时 对 海盐 社 文 章 提出 宝贵 建议 ， 与 我 
们 分 享 不 同 的 观点 、 看 法 。 还 要 感谢 海盐 社 的 颜 川 、 角 马 、feliam、 李 洋 、 阿 肆 、 海 丹 、 
小 火焰 、QQQ、 潘 团子 、 效 小 到 等 所 有 成 员 ， 感 谢 大 家 与 我 们 共同 学 习 ， 为 我 们 提供 更 
多 的 思路 和 见解 。 感 谢 清华 大 学 出 版 社 所 有 的 工作 人 员 ， 本 书 的 出 版 是 大 家 共同 努力 的 结 
果 ， 在 此 向 各 位 出 版 工作 人 员 表 示 真 诚 的 谢意 。 


由 于 本 书 中 我 们 以 一 个 新 手 设计 师 的 视角 进行 论述 ， 存 在 种 种 局 限 ， 书 中 还 有 诸多 不 足 ， 
还 请 读者 朋友 予以 指正 。 


